CODEWITHSUNDEEP
javascriptreactjsstateconditional-operator
crevulus
crevulus

Reputation: 2418

React rendering based on boolean in state: ternary not working

React Dev Tools shows me that the state is successfully changing, however the correct component is not rendering.

Here's the ternary inside a button that toggles state:

return (
  <div>
    <div>{questionBlocks}</div>
    <button className="advanced-options" onClick={this.toggleAdvanced}>
      {this.state.advancedText}
      <span>
        {this.showAdvanced ? <ExpandLessIcon /> : <ExpandMoreIcon />}
      </span>
    </button>
  </div>
);

Here's the toggleAdvanced function (that's working perfectly, as I am successfully showing new elements on toggling showAdvanced:

toggleAdvanced = (e) => {
    e.preventDefault();
    if (this.state.showAdvanced === true) {
      this.setState((prevState) => ({
        showAdvanced: !prevState.showAdvanced,
      }));
    } else {
     this.setState((prevState) => ({
       showAdvanced: !prevState.showAdvanced,
      }));
    }
};

Looked at these solutions, amongst others, but no success.

Upvotes: 0

Views: 413

Answers (2)

mkkekkonen
mkkekkonen

Reputation: 1774

You're missing state in the ternary. It should be this.state.showAdvanced, not this.showAdvanced.

Upvotes: 1

ehab
ehab

Reputation: 8024

the problem is probably here

  <span>
        {this.showAdvanced ? <ExpandLessIcon /> : <ExpandMoreIcon />}
      </span>

You are using this.showAdvanced but it should be this.state.showAdvanced

Upvotes: 1

Related Questions