Component not updating after setState call

I have a modal component that should be called when setState changes, but for some reason it does not update. In the first file Im set the following in the render.

<ModalParcel showModal={this.state.showModal} parcelToConfirm={this.state.dataForParcelToConfirm} />

Inside the modal component constructor (), I install the following.

constructor(props) {
    super(props);

    console.log("Constructor for modal componenet called.")

    //this.renderRowForMain = this.renderRowForMain.bind(this);

    this.state = {
      show: this.props.showModal
    };

  }

render() {

    if(this.state.show == true){

        var content = 
        <View style={styles.modal}>
            <View style={styles.modalContent}>
                <TouchableHighlight onPress={() => this.closeModal()}>
                    <Text>Close</Text>
                </TouchableHighlight>
            </View>
        </View>;

    }else {

        var content = null;

    }

    return ( content );

  }

The problem is that constructor () is only called once at initial creation. I got the impression that when I update the state to show the modal, the constructor will be called again, but this does not happen.

Basically I want to change state to show modal and then re-run render ().

+4
source share
1 answer

constructor , .

, :

1. componentWillReceiveProps(){, , - , state value showModal, :

componentWillReceiveProps(nextProp){
   this.setState({
      show: nextProps.showModal
   });
}

DOC:

componentWillReceiveProps() . (, reset it), this.props nextProps , this.setState() .

2. props state this.props.showModel , , , - , .

+4

Source: https://habr.com/ru/post/1676996/


All Articles