CODEWITHSUNDEEP
reactjsjsx
adriam
adriam

Reputation: 451

How do you get the value for select-option in React?

I tried using onChange, onClick, and ref and none of those would work to give me the value of the option I selected

<select ref={input => { this.handleInput(input.value) } }>
    <option value="1">Blah</option>
    <option value="2">Blah2</option>
    <option value="3">Blah3</option>
</select>

As you can see, input.value is showing me undefined. I don't know however else to get the option value, even changing ref to onChange and onClick didn't work

Upvotes: 2

Views: 12903

Answers (1)

Emad Emami
Emad Emami

Reputation: 6639

Try onChange like this:

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      result: ''
    };
  }
  
  handleSelectChange = (event) => {
    this.setState({
      result: event.target.value
    })
  }

  render() {
    return (
      <div>
      <select onClick={this.handleSelectChange}>
          <option value="1">Blah</option>
          <option value="2">Blah2</option>
          <option value="3">Blah3</option>
      </select>
      {this.state.result}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Upvotes: 2

Related Questions