반응 퀴즈콜 앱

//App.js
import React, {useEffect, useState } from 'react'
import Blob from './Blob'
import Home from './Home'
import Quizz from './Quizz';

const App = () => {
  const [showHome, setShowHome] = useState(true);
  const [data, setData] = useState([]);

  useEffect(()=>{
      async function fetchData (){
          const response = await fetch("https://opentdb.com/api.php?amount=10&category=31&type=multiple");
          const datas = await response.json();
          setData(datas.results);

      }
      fetchData();
  }, [])

  const updateShowHome = () =>{
    setShowHome(prevShowHome => !prevShowHome);
  }

  return (
    <main>
      <Blob />
      {showHome ? <Home handleClick={updateShowHome}/> : <Quizz datas={data}/>}
    </main>
  )
}

export default App

//Quizz.js

import React, { useState } from 'react'
import QuizzList from './QuizzList';
import { nanoid } from 'nanoid';
import Submit from './Submit';

const Quizz = (props) => {
    const {datas} = props;

    const newDatas = () => {
      const arr = [];
      datas.forEach(item => {
        arr.push({...item, id: nanoid(), isCheck: false});
      })
      return arr;
    }

    const [newData, setNewData] = useState(newDatas());

    const [test, setTest] = useState([]);

    const asideElements = newData.map(item => {
        const randomIndex = Math.floor(Math.random() * item.incorrect_answers.length);
        const allAnswers = [...item.incorrect_answers]
        allAnswers.splice(randomIndex, 0, item.correct_answer);
        return  <QuizzList 
                    key={item.id}
                    question={item.question}
                    correct_answer={item.correct_answer}
                    incorrect_answers={item.incorrect_answers}
                    allAnswers = {allAnswers}
                    isCheck={item.isCheck}
                    id={item.id}
                />
    }
   )



  return (
    <section className='quizz'>
        {asideElements}
        <div className='container-button'>
          <Submit 
            setNewData={setNewData}
          />
        </div>
    </section>
  )
}

export default Quizz

//Quizzlist.js

import React, { useEffect, useState } from 'react'
import { nanoid } from 'nanoid';
import Submit from './Submit';


const QuizzList = (props) => {
    const {question, correct_answer, incorrect_answers, isCheck, id, allAnswers} = props;
    const regex = /(")|('t)|('s)|(')|(&!)/gi;
    const otherRegex = /é/gi;


    const dataAnswers = () => {
      const arr = [];
      allAnswers.map(item => {
        arr.push({
          answer: item,
          id: nanoid(),
          isTrue: false
        })
      })
      return arr
    }


    const [state, setState] = useState(dataAnswers());


    const handleCheck = (id) =>{

      setState(prev => prev.map(item => {
        if(item.id !== id ){
          return {...item, isTrue: false}
        }
        return item.id === id ? {...item, isTrue: true} :  item;
    }))

  }


    const answerElement = state.map(item => {


      return(
        <div 
          key={item.id}
          className="current_answers "
          onClick={() => handleCheck(item.id)}
          style = {{backgroundColor: item.isTrue ? "#D6DBF5" : "#F5F7FB", borderColor: item.isTrue && "#D6DBF5"}}
        >
          {item.answer.replace(regex, "").replace(otherRegex, "e")}
        </div>
      )
    })

  return (
    <aside>
      <h1>{question.replace(regex, "").replace(otherRegex, "e")}</h1>
      <div className='container_answers'>
        {answerElement}
      </div>
      <div className='border'></div>
    </aside>
  )
}

export default QuizzList

//Submit.js

import React, {useState} from 'react';

const Submit = ({setNewData}) => {

    const [checkAnswers, setCheckAnswers] = useState(true);

    const handleShowAnswers = () => {

      setNewData(prev => prev.map(item =>{
        return item.correct_answer
      }))
    }

  return (
    <button 
      onClick={handleShowAnswers}
    >
    {checkAnswers ? "Check answers" : "Play again"}
    </button>
  )
}

export default Submit