I have a parent and nest child component hierarchy of QuestionsAndAnswersScreen
-> QuestionInput
-> QuestionSelector
-> AnswerSelector
. I need to pass the question and answer object back up to the QuestionAndAnswerScreen
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 QuestionAnswerScreen
and AnswerSelector
:
function QuestionsAndAnswers() {const {shell, body} = styles;return (<View style={shell}><SignUpHeader title="Add your answers" page={5}/><View style={body}> {qAndA[1] ? <Answer question={qAndA[1].question} answer={qAndA[1].answer}/> : <QuestionInput />} {qAndA[2] ? <Answer question={qAndA[2].question} answer={qAndA[2].answer}/> : <QuestionInput />} {qAndA[3] ? <Answer question={qAndA[3].question} answer={qAndA[3].answer}/> : <QuestionInput />}</View><SignUpFooter title={`Questions\n& Answers`} buttonTitle={"Done"} disabled={false} route="QuestionsAndAnswers" /></View> );}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(() => { setModalVisible(visible) }, [visible]) function answerQuestion() { setModalVisible(false); navigation.navigate('QuestionsAndAnswers'); } return (<View><Modal style={shell} isVisible={modalVisible} onBackdropPress={() => { setModalVisible(false); answerModalVisible(false); }}><View><Text style={pickAnAnswer}>Add answer</Text></View><View><Text style={questionStyle}>{question}</Text></View><View><TextInput style={answerTextInput} placeholder="Add your answer here..." placeholderTextColor="#878787" onChangeText={(text: string) => setAnswer(text)} /><View style={{alignItems: 'flex-end', marginTop: 44}}><TouchableOpacity style={doneButton} onPress={() => answerQuestion()}><Text style={buttonText}> Done</Text></TouchableOpacity></View></View></Modal></View> );}
As you can see I get my Question and Answer in the AnswerInput
but then need to navigate back to the main screen in order to display them. Any help would be great thanks :)