How to display data as per selected value in react js?

Question

I have a dropdown i want to display a div as per gender as given below using jquery, this is working fine but how can i do it in reactJs?

$(function(){
  $('select').change(function(){
  var selectedValue = $(this).find(':selected').val();
   $('.myDiv').hide();
  $('.' + selectedValue).show();
  });
});

.myDiv{ display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>                                             <option>Gender</option>
<option value="gents-content">Gents</option>
<option value="ladies-content">Ladies</option>
</select>

<p class="myDiv gents-content">getns content</p>
<p class="myDiv ladies-content">ladies content</p>

ReactJs Code==========================================================

  constructor(props){
        super(props)
        this.state = {value: 'show'}
    }
    
      handleGender = event => {
        this.setState({value: event.target.value})
    }
    
     render() {
        return (
            <div>
<select className="form-control genderList" name="" onChange={this.handleGender}>                                         <option>Gender</option>
<option value="show">Gents</option>
<option value="hide">Ladies</option> 
</select>                                                    
                                                    
<div className={this.state.value}>This is div</div>
</div>

ThankYou!

Majid M. · Accepted Answer · 2021-06-12 12:03:29Z

1

You don't need to select anything in React. With a state definition you can achieve your request. I changed and wrote this code based on your React code:

 constructor(props){
    super(props)
    this.state = {value: ''}
}

handleGender = event => {
    this.setState({value: event.target.value})
}

render() {
    let myDiv = this.state.value =='show' ? <div class="gents-content">getns content</div> :
                this.state.value =='hide' ? <div  class="ladies-content">ladies content</div> : 
                <div></div>;
    return (
        <div>
        <select className="form-control genderList" name="" onChange={this.handleGender}>
           <option>Gender</option>
           <option value="show">Gents</option>
           <option value="hide">Ladies</option> 
        </select>                                                                                                        
       {myDiv}
       </div>
}

edited Jun 12, 2021 at 12:03

answered Jun 12, 2021 at 11:03

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rohit Verma Over a year ago

function is not working in this because this is class based reactJs

Rohit Verma Over a year ago

'state' is not defined no-undef

Majid M. Over a year ago

@RohitVerma Excuse me, it should be this.state.value not state.value lonely.

Rohit Verma Over a year ago

this is working now but when I select heading "Gender" then both div should be hide...

Majid M. Over a year ago

@RohitVerma for its default value, just set the state's default value to ''. I updated the state definition.

Gh05d · Accepted Answer · 2021-06-12 11:02:26Z

1

You could display the value of the state object. Basically move this.state.value from the css class to between the <div> and change the value from show and hide to gent and lady (or whatever you want). Also add an empty value for the default option to hide the <div />:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }

  handleGender = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <div>
        <select
          className="form-control genderList"
          name=""
          onChange={this.handleGender}
        >
          <option value="">Gender</option>
          <option value="gent">Gents</option>
          <option value="lady">Ladies</option>
        </select>

        {this.state.value && <div>This is the gender: {this.state.value}</div>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />

answered Jun 12, 2021 at 11:02

Gh05d

9,08211 gold badges42 silver badges84 bronze badges

2 Comments

Rohit Verma Over a year ago

i not need to display only selected value. I need to display other data but those data should be as per selected value...

Gh05d Over a year ago

That is no problem, just exchange this.state.value for this.state.value =="gent" ? someComponent : this.state.value == "lady" ? someOtherComponent : defaultComponent

Collectives™ on Stack Overflow

How to display data as per selected value in react js?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related