JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="root"></div>

React

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selectValue: '1'};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({selectValue: event.target.value});
  }

  render() {
    return (
      <div>
        <select defaultValue={this.state.selectValue} onChange={this.handleChange}>
          <option value="N/A">N/A</option>
          <option value="1">Grapefruit</option>
          <option value="2">Lime</option>
          <option value="3">Coconut</option>
          <option value="4">Mango</option>
        </select>
        <p>Selected value is : {this.state.selectValue}</p>        
      </div>
    );
  }
}

ReactDOM.render(
  <FlavorForm />, document.getElementById('root')
);