React

by Zoltan Boros

HTML

<div id="app"></div>

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	dropDownListValue: '',
      out: '',
    }
  }
  
  render() {
  	const { setState } = this;
    const { dropDownListValue, out } = this.state;
    return (
      <React.Fragment>
        <select
          value={dropDownListValue}
          onChange={(ev) => setState({ dropDownListValue: ev.target.value })}
        >
          <option value="item 1">item 1</option>
          <option value="item 2">item 2</option>
        </select>
        <button
          type="button"
          onClick={() => console.log(`ddv: [${dropDownListValue}]`)}
        >
          print drop-down list's value
        </button>
        <pre>{out}</pre>
      </React.Fragment>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#app'))