setState of child component only when it is called

Question

i have a parent component and i have called the child component in its HTML like this.

render() {
   <EditBank
                deal={dealDetailData && dealDetailData.id}
                open={editBankModalStatus}
                headerText={"Edit Bank Account"}
                getInvestmentOfferingDetailsById = {() =>this.props.getInvestmentOfferingDetailsById({
                  id: this.props.match.params.id
                })}
                bankDetail={bankDetails}
                toggleEditModal={() => this.handleEditModal("editBankModalStatus", {})}
            />
}

EditBank component is a modal which is only shown when editBankModalStatus is true and it is set to be true on a button click.

Now i want to set the state of EditBank only when button is clicked and whatever bankDetails has been passed to it.
I have tired componentDidMount lifecycle hook but it updated when component is rendered only.

I want to update the state of EditBank component when it is shown on screen only. Any help is appreciated.

Answer 1

Try do this :

render(){
  return (
    <div>
      {editBankModalStatus === true &&
            <EditBank
                deal={dealDetailData && dealDetailData.id}
                open={editBankModalStatus}
                headerText={"Edit Bank Account"}
                getInvestmentOfferingDetailsById = {() =>this.props.getInvestmentOfferingDetailsById({
                  id: this.props.match.params.id
                })}
                bankDetail={bankDetails}
                toggleEditModal={() => this.handleEditModal("editBankModalStatus", {})}
            />
      }
    </div>
  );
}

so EditBank will shown only if editBankModalStatus is true.