Hello, I have a problem on my project, I would like that when I click on the button check answers all the true answers change background-color in green, I can't get the state of the component Quizzlist to send it in my component Submit your help will be welcome i using React to do ``` //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 (

{showHome ? : }

) } 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 } ) return (

{asideElements}

) } 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(

handleCheck(item.id)} style = {{backgroundColor: item.isTrue ? "#D6DBF5" : "#F5F7FB", borderColor: item.isTrue && "#D6DBF5"}} > {item.answer.replace(regex, "").replace(otherRegex, "e")}

) }) return ( ) } 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 ( ) } export default Submit ```

rochelin

React quizzicall app

Join Our Newsletter. No Spam, Only the good stuff.