how can we show or hide a div when the selected option is changed, I have 1 select dropdown, with 3 options, want to show or hide a div when the option is changed, trying to go with setState but no luck,

   state={
     showOption: false,
   }

   handleOptionChange = (event) => {
      event.preventDefault();
      this.setState({
      showOption : true
    }) 
    console.log('changed')
   }

   <select className="form-control">
      <option  value="option one">option one</option>
      <option value="option two"
        onChange={this.hadleOptionChange}
      >option two</option>
      <option value="option three">option three</option>
   </select>

    <div>
     {this.state.showOption}
     <div className="form-group">
       <label>Number one should hide or show when option one is cliked</label>
       <input type="text"  name="" className="form-control"/>
     </div>
   </div>

how can we show or hide a div when the selected option is changed, I have 1 select dropdown, with 3 options, want to show or hide a div when the option is changed, trying to go with setState but no luck,

   state={
     showOption: false,
   }

   handleOptionChange = (event) => {
      event.preventDefault();
      this.setState({
      showOption : true
    }) 
    console.log('changed')
   }

   <select className="form-control">
      <option  value="option one">option one</option>
      <option value="option two"
        onChange={this.hadleOptionChange}
      >option two</option>
      <option value="option three">option three</option>
   </select>

    <div>
     {this.state.showOption}
     <div className="form-group">
       <label>Number one should hide or show when option one is cliked</label>
       <input type="text"  name="" className="form-control"/>
     </div>
   </div>

• javascript
• reactjs
• jsx

Share Improve this question Follow edited Dec 20, 2019 at 10:08 Ori Drori 194k3232 gold badges238238 silver badges229229 bronze badges asked Dec 20, 2019 at 9:54 ishfaqishfaq 8333 gold badges44 silver badges1414 bronze badges 2

• (That minimal reproducible example can be runnable using Stack Snippets, the [<>] toolbar button. Stack Snippets support React, including JSX; here's how to do one.) – T.J. Crowder Commented Dec 20, 2019 at 9:55
• Have you tried to make a little research? This is pretty basic, I'd advise to follow the 'Get started' page of React, follow the tutorial and you'll know how to do this. – sjahan Commented Dec 20, 2019 at 9:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The problem is in the way you're trying to use this.state.showOption:

 {this.state.showOption} // this doesn't do anything
 <div className="form-group">
   <label>Number one should hide or show when option one is cliked</label>
   <input type="text"  name="" className="form-control"/>
 </div>

Change it to:

 {this.state.showOption && // if it's true return the actual JSX
 <div className="form-group">
   <label>Number one should hide or show when option one is cliked</label>
   <input type="text"  name="" className="form-control"/>
 </div>
 }

This is called short circuit evaluation. As long as the the expression this.state.showOption is false, the expression returns false (which React ignores). If this.state.showOption is true the evaluation continues, and the JSX is returned and rendered by React.

In addition as @TKoL mented you should move the onChange event handler to the select tag. You should also add the value={this.state.showOption}:

<select className="form-control"
  value={this.state.showOption}
  onChange={this.handleOptionChange}>
  <option value="option one">option one</option>
  <option value="option two">option two</option>
  <option value="option three">option three</option>
</select>

You can find an example of React's handling of controlled select ponent here.