Question 190979 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Button is Triggered for the First time only, After that Button is not working

I have a Next Button in Parent Component, And When I click on that Next Button, A Dialog box will open and that dialog box has two Option : "Yes" Or "No"(Which is in Child Component).. When I Click on "No" Button it should hide the Dialog box and it is working Fine….. Now Issue is When dialog box is hidden and Again When I click on Next button again and again, That dialog box popup is not showing up… I Think some Issue in the child Comp with the No Button…. Can anyone help me in this…Thanks in advance….

Parent Component :

  constructor {
    this.state = { enableNextButton: false}
    }

   checking () {
    let { add1, countryCode, stateProvince, zip, companyName } = this.state;
    let payload = {
      address_l1: add1,
      country: countryCode,
    };
    this.setState({
      enableNextButton: false,
    });
  };

  return (
    <>
      <div>
        <button
          onClick={() => this.checking()}
          className={
            this.state.enableNextButton ? "primary" : "primary disabled"
          }
        >
          <span className="back">Next &gt; </span>
        </button>
        <BarLoader
          width={"50%"}
          color={"#84B135"}
          loading={this.props.addLoader}
        />
      </div>

      <ChildComp />
      />
    </>
  );

Child Comp () :

  constructor(props) {
    super(props);
    this.state = {
      showDialog: true
      };
  }

  handleNoButtonClick = () => {
    this.setState({ showDialog: false });
  };

  <div

  
        </p>
        <div className="padding-around">
          Do you wish to continue with below address?
        </div>
        <div>
            </button>
            <button
              className="primary"
              onClick={() => this.handleNoButtonClick()}
            >
              NO
            </button>
          </span>
        </div>
      </div>
    )}
  </div>;
Tags:

2

Answers


  1. 0

    From the parent component you are calling the child component anyway and from the child component you want to controle its styling depends on its state.
    when you click the NO button the child component rerendes with the new className but enableNextButton state in the parent component remains false so when you click the next button again, enableNextButton will be set to false, and since it is already false, this won’t rerender the parent component so the child component won’t be rerendered too, therefore showDialog is still false there.

    to avoid this one solution is to manage how to set enableNextButton to true when the NO button is clicked,
    however a better approach is to move showDialog to the parent component and decide from there if the child component should be displayed or which className should take

    // add showDialog to your state in the parent component
constructor(props) {
  super(props);
  this.state = {
    enableNextButton: false,
    showDialog: false
  };
}

checking() {
  let { add1, countryCode } = this.state;
  let payload = {
    address_l1: add1,
    country: countryCode
  };

  this.setState({
    enableNextButton: false,
    // set it to true when next button is clicked
    showDialog: true
  });
}

setShowDialogTofalse() {
 this.setState({ showDialog: false });
}

//...
<DisclaimerDomainDialog
  //...
  setShowDialogTofalse={this.setShowDialogTofalse.bind(this)}
  showDialog={this.state.showDialog}
/>

    now you get rif of showDialog state in the child component so you use this.props.showDialog instead of this.state.showDialog so when you click the NO button you want to set showDialog of the parent component to false:

    <button onClick={() => {
  this.props.setShowDialogTofalse();
}}>
 NO
</button>
    Login or Signup to reply.
  2. 0

    Once, you click the button, handleNoButtonClick() method updates the showDialog state to false.

    <div
className={
  this.props.openDialog && this.state.showDialog(it is false)
    ? "dialog-open"
    : "dialog-close"
}

    So, Dialog is not showing up. After, parents component doesn’t have method that update showDialog to true.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search