Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to pass up nested state and avoid useCallback in react native

$
0
0

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 :)


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>