title: How to pass up nested state and avoid useCallback in react native
body: <p>I have a parent and nest child component hierarchy of <code>QuestionsAndAnswersScreen</code> -&gt; <code>QuestionInput</code> -&gt; <code>QuestionSelector</code> -&gt; <code>AnswerSelector</code>. I need to pass the question and answer object back up to the <code>QuestionAndAnswerScreen</code> in order to show it on the view. However I cannot find a way without going into deep nested callbacks.
  Here is my code for the <code>QuestionAnswerScreen</code> and <code>AnswerSelector</code>:</p>
  <pre><code>function QuestionsAndAnswers() {
  const {shell, body} = styles;
  
  return (
      &lt;View style={shell}&gt;
          &lt;SignUpHeader title=&quot;Add your answers&quot; page={5}/&gt;
          &lt;View style={body}&gt;
              {qAndA[1] ? &lt;Answer question={qAndA[1].question} answer={qAndA[1].answer}/&gt; : &lt;QuestionInput /&gt;}
              {qAndA[2] ? &lt;Answer question={qAndA[2].question} answer={qAndA[2].answer}/&gt; : &lt;QuestionInput /&gt;}
              {qAndA[3] ? &lt;Answer question={qAndA[3].question} answer={qAndA[3].answer}/&gt; : &lt;QuestionInput /&gt;}
          &lt;/View&gt;
          &lt;SignUpFooter
              title={`Questions\n&amp; Answers`}
              buttonTitle={&quot;Done&quot;}
              disabled={false}
              route=&quot;QuestionsAndAnswers&quot;
          /&gt;
      &lt;/View&gt;
      );
  }
  function AnswerInput(props: AnswerInputProps) {
      const {question, visible, answerModalVisible} = props;
      const {pickAnAnswer, doneButton, answerTextInput, questionStyle, shell, buttonText} = styles;
      const [modalVisible, setModalVisible] = useState(visible)
      const [answer, setAnswer] = useState('');
      const navigation = useNavigation();
  
      useEffect(() =&gt; {
          setModalVisible(visible)
      }, [visible])
  
      function answerQuestion() {
          setModalVisible(false);
          navigation.navigate('QuestionsAndAnswers');
      }
  
      return (
          &lt;View&gt;
              &lt;Modal style={shell}
                     isVisible={modalVisible}
                     onBackdropPress={() =&gt; {
                         setModalVisible(false);
                         answerModalVisible(false);
                     }}
              &gt;
                  &lt;View&gt;
                      &lt;Text style={pickAnAnswer}&gt;Add answer&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View&gt;
                      &lt;Text style={questionStyle}&gt;{question}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View&gt;
                      &lt;TextInput
                          style={answerTextInput}
                          placeholder=&quot;Add your answer here...&quot;
                          placeholderTextColor=&quot;#878787&quot;
                          onChangeText={(text: string) =&gt; setAnswer(text)}
                      /&gt;
                      &lt;View style={{alignItems: 'flex-end', marginTop: 44}}&gt;
                          &lt;TouchableOpacity style={doneButton} onPress={() =&gt; answerQuestion()}&gt;
                              &lt;Text style={buttonText}&gt;
                                  Done
                              &lt;/Text&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/Modal&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  <p>As you can see I get my Question and Answer in the <code>AnswerInput</code> but then need to navigate back to the main screen in order to display them. Any help would be great thanks :)</p>