React - parent passing data to child becomes undefined-CodePudding

I am fetching an object named Quiz. Im trying to pass a single element of Quiz (questionAnswerPair) to a child element named QuestionAnswer.

The Quiz is collected fine and each element is able to iterate through. However the integration doesn't work as intended currently though that is not the reason of my post.

The reason for my post is the QuestionAnswerPair is not being passed to the child element correctly (displayed undefined when printed in child component).

parent:

export default function Quiz() {

  var passedid = 1; //need to replace this with passed quiz ID
  const [quiz, setQuiz ]=useState('')
  const [executedFetch, setExecutedFetch]=useState('')

  useEffect(() => {
    fetch(`http://XXX.XXX.XXX.XXX:8080/Quiz/${passedid}`)
    .then(response => response.json())
    .then(json => { 
      console.log(json)
      setQuiz(json)
      setExecutedFetch(true)
     })
  },[]) 

  const [currentQuestionAnswerPair, setCurrentQuestionAnswerPair]=useState('')
  const [executedIterate, setExecutedIterate]=useState('')

  //this runs twice, once before the data collection and 
  //one after which is why it needs the conditional if
  useEffect(() => {
    if (executedFetch === true){
      for (var i=0; i < quiz.questionAnswerPairs?.length; i   )
      {
        console.log(quiz.questionAnswerPairs[i]) //prints current fine
        setCurrentQuestionAnswerPair(quiz.questionAnswerPairs[i])
        setExecutedIterate(true)

        // make it wait till the question is answered somehow
        // then store the answer within an attempt
      }
      //set entire attempt here
    }
  },[executedFetch])

  const[ userSelectionData, setUserSelectionData]=useState('')

  const childToParent = (userSelectionData) => {
    setUserSelectionData(userSelectionData);
  }

  const parentToChild = () => {
    setParentToChildData(currentQuestionAnswerPair);
  }

  if (executedIterate === true){
    console.log("executedIterate "   executedIterate)
    console.log(currentQuestionAnswerPair)
    
    return (

        <br/> <br/> <br/> <br/>
        parent data = {userSelectionData}
        <br/> <br/> <br/> <br/>
        <QuestionAnswer parentToChild={currentQuestionAnswerPair} childToParent={childToParent}/>
      </div>
    );
  }

  else{
    return (
      <div className="App">
        not displaying
      </div>
    );
  }
}

child:

export default function QuestionAnswer({currentQuestionAnswerPair,childToParent})  {

    const userSelectionData = "child data passed"

    const [questionAnswer, setQuestionAnswer]=useState('')
    useEffect(() => {
        console.log(currentQuestionAnswerPair) // this is undefined
        setQuestionAnswer(currentQuestionAnswerPair)
    },[])

    console.log(currentQuestionAnswerPair) // this is undefined
    console.log(questionAnswer) // this is undefined

    return (
        <div>
            <br/>
            current question answer = {questionAnswer}
            <br/> <br/>
            current question answer pair = {currentQuestionAnswerPair}
            <br/> <br/>
            <Button primary onClick={() => childToParent(userSelectionData)}>Click Child</Button>

        </div>
    )
}

Furthermore passing dependency to the child useEffect [currentQuestionAnswerPair] doesn't change the issue

output in console:

CodePudding user response：

change this line,

<QuestionAnswer parentToChild={currentQuestionAnswerPair} childToParent={childToParent}/>

to this :

<QuestionAnswer currentQuestionAnswerPair={currentQuestionAnswerPair} childToParent={childToParent}/>

As you are passing the props, parentToChild and childToParent, not currentQuestionAnswerPair and childToParent, the prop currentQuestionAnswerPair is always undefined