React Native: children not reacting to parent prop change

Question

I have a custom modal component where I pass a isVisible prop, this prop comes from it's parent state property state, now in the modal (child component) I can eit and event and react to it in the parent, changing the value in the parent should effect the child and the modal should close now, but the modal is not closing!

Parent:


const [ modalIsVisible, setModalIsVisible ] = useState(false);

const handleCloseModal = ()=>
    {
        setModalIsVisible(false); Alert.alert('caca');
    };

<ReviewFormModal1 onCloseModal={ ()=>{ handleCloseModal() } } isVisible={modalIsVisible}></ReviewFormModal1>

Child:


const onClosePress = () => 
    {
        props.onCloseModal();
    }

<Modal isVisible={props.isVisible} style={styles.modal}>
                <TouchableOpacity onPress={ ()=>{ onClosePress() } } style={{ flex:1 }}></TouchableOpacity>
</Modal>

I'm still a react-native newb (coming from vue which imo is much easier), but afaik this is the proper way to react to prop changes in the parent, props being always top-down.

Raphael M. Raphael M. · Accepted Answer · 2020-11-26T14:26:24

Either remove handleCloseModal curly brackets or add a return statement:

<ReviewFormModal1 onCloseModal={ () => handleCloseModal()  } isVisible={modalIsVisible}></ReviewFormModal1>

or

<ReviewFormModal1 onCloseModal={ ()=>{return handleCloseModal() } } isVisible={modalIsVisible}></ReviewFormModal1>

Also, you can pass a simple pointer for your function like this:

<ReviewFormModal1 onCloseModal={handleCloseModal} isVisible={modalIsVisible}></ReviewFormModal1>

React Native: children not reacting to parent prop change

1 Answers