React-Native How to update parent state variable from child component

Question

I am presenting a component using Modal in react-native. So in the Child component(the component that is presented on top of parent as Modal) I am trying to update the state variable of parent, but it is throwing error like "'changeModalVisibility' is missing in props validation".

Kindly help me to solve this.

Related Code is below:

// Parent Class in render
<SafeAreaView style={styles.container}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.isModalVisible}
          onRequestClose={() => { this.changeModalVisibility(false) }}
        >
          <ChildClass
            changeModalVisibility={this.changeModalVisibility}
          />
        </Modal>
</SafeAreaView>
// Outside Render function
changeModalVisibility = (bool) => {
 this.setState({ isModalVisible: visible });
}

// In Child Class 
<TouchableHighlight
              underlayColor="none"
              onPress={this.props.closeButtonTapped}
              style={{ alignItems: 'center', justifyContent: 'center', }}
            >
              <Text style={{
                color: 'white',
                marginTop: 10,
                marginLeft: 20,
                fontWeight: '600',
                fontSize: 18,
              }}
              >Close
              </Text>
            </TouchableHighlight>

closeButtonTapped() {
this.props.changeModalVisibility //"**'changeModalVisibility' is missing in props validation**"
}

This is an [issue with your prop-types](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md), not a functional error. — remeus, Jul 30 '19 at 10:21
Add braces **()** at the end of the method in closeButtonTapped() Method like `this.props.changeModalVisibility()` — Kaushik Radadiya, Jul 30 '19 at 10:26
@KaushikRadadiya: Its throwing error "Expected an assignment or function call and instead saw an expression. & is missing in props validation" — iOSDev, Jul 30 '19 at 10:42
Have you tried to pass a parameter with a function call? like this this.props.changeModalVisibility(false) — Kaushik Radadiya, Jul 30 '19 at 11:02

Matin Zadeh Dolatabad · Accepted Answer · 2019-07-30T11:19:17.493

2

Your Child component in parent component has changeModalVisibility prop.
You should call
this.props.changeModalVisibility(true) or this.props.changeModalVisibility(false)
inside child component. Make sure to use arrow function when you want to execute function from prop :

changeModalVisibility={this.changeModalVisibility}

changeModalVisibility = (visible) => {
 this.setState({ isModalVisible: visible });
}

In child component onPress props should be like this:

onPress={() => this.closeButtonTapped()}

edited Jul 30 '19 at 11:19

answered Jul 30 '19 at 10:29

Matin Zadeh Dolatabad

877
6
20

I have tried it, it is throwing same error, and method in the parent not getting called – iOSDev Jul 30 '19 at 10:43
Answer updated :) You created function and called prop inside onPress. – Matin Zadeh Dolatabad Jul 30 '19 at 10:47
Should "changeModalVisibility={this.changeModalVisibility.bind(this)}" this be written in Parent component's constructor method? I have kept that by keeping in Parent method's constructor and tried to log props in Child Component, empty data is returned and parent method didn't get called – iOSDev Jul 30 '19 at 10:57
Yep in parent component. – Matin Zadeh Dolatabad Jul 30 '19 at 11:18

React-Native How to update parent state variable from child component

1 Answers1