[React]Advice on how to update parent state from grandchild[solved]

Hi everyone,:blush:

I am back again to ask some advice. Now I am working on a form to input all the questions, answers, etc for the test on the quiz application I am working on. And, as the teachers will have to be able to see how the input questions and answers look like, I need to make a preview of it. The problem I have with it is that I have to update the state of my Quiz component from its grandchild component in order to update its great grandchild. To be more clear, I am working on a part of my application which looks like this :
10
So I need my Form component to interact with my Quiz component which will interact with my DisplayQuizz component. I tried to do it with a callback but it’s not working. The callback function update the form component state and not the Quiz component state.:persevere:

So I was wondering do I have to use Redux or Context in this case (and face this hardship even if I am very affraid of it) or can I do it without it ?

What is your opinion on a case like this ?

Thanks in advance for your responses.:blush:

EDIT : Thank you all and sorry to have bothered all of you. It’s not working because of a syntax mistake. So this topic is closed now.

Give the Quiz Component a function for updating it’s state (don’t forget to bind the function to this in the Quiz class constructor). Then send the function as a prop to Teacher and forward it as a prop to Form.

Quiz:
updateQuizState() {
    this.setState({...changes...})
}
render() {
    return <Teacher quizStateFunction={this.updateQuizState} />
}

Teacher(props):
    return <Form quizStateFunction=props.quizStateFunction />

Form(props):
    return (
        <form>
            <input type="text" value={props.quizStateFunction} />
            // OR depending on what tag it's being attached to
            <button onClick={(event) => {
                                 event.preventDefault()
                                 props.quizStateFunction(event) 
                             }}
        </form>
    )

Thread the state as a prop through Quiz > Teacher > Form > DisplayQuizz in a similar way.

Or, ya know, Redux.

Thank you for your response.:blush: In fact my callback is not working because I don’t update the right state.