Rendering a Select Tag on Click - React Js

How To: onClick/onChange for a <select>'s <option> in a child component

You can have a child component that only renders the option tag. You actually don't need to add an event handler to the option tag. The select onChange event get called automatically once an option tag is clicked (passing it's value with it).

See the example here: http://codepen.io/anon/pen/oBzzWr?editors=0010

Toggle Click On Select Tag - React

1. You have to set the clicked item id too in a state variable and in the render method of the list you will have to check the this id and return ItemList only for the clicked item. If you have posted the code to display the list I would have shared the edited code.

2. You will have to keep an array of states to keep track of each item in the list. In onChange of the select you will have to set the state value and App component's render should have the following statement

<div className="myspace" onClick={this.clickfn }>{this.state.variableToTrackSelect}</div>

I have posted the code posted in https://codesandbox.io/s/7y8k77nrm1.

OnChange event using React JS for drop down

The change event is triggered on the <select> element, not the <option> element. However, that's not the only problem. The way you defined the change function won't cause a rerender of the component. It seems like you might not have fully grasped the concept of React yet, so maybe "Thinking in React" helps.

You have to store the selected value as state and update the state when the value changes. Updating the state will trigger a rerender of the component.

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

Also note that <p> elements don't have a value attribute. React/JSX simply replicates the well-known HTML syntax, it doesn't introduce custom attributes (with the exception of key and ref). If you want the selected value to be the content of the <p> element then simply put inside of it, like you would do with any static content.

Learn more about event handling, state and form controls:

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

React JSX: selecting "selected" on selected <select> option

React makes this even easier for you. Instead of defining selected on each option, you can (and should) simply write value={optionsState} on the select tag itself:

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

For more info, see the React select tag doc.

Also, React automatically understands booleans for this purpose, so you can simply write (note: not recommended)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

and it will output 'selected' appropriately.

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

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>

const onChange =(e) => {
  console.log(e.target.value);
}

<select name="select" onChange = {onChange}>
      <option>Select a Region</option>
      {region.map((nameOfRegion, i) => {
        return (
          <option key={i}>
            {nameOfRegion}
          </option>
        );
      })}
    </select>