react select

1import React, { Component } from 'react'
2import Select from 'react-select'
3
4const options = [
5  { value: 'chocolate', label: 'Chocolate' },
6  { value: 'strawberry', label: 'Strawberry' },
7  { value: 'vanilla', label: 'Vanilla' }
8]
9
10const MyComponent = () => (
11  <Select options={options} />
12)
13

1class FlavorForm extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {value: 'coconut'};
5    this.handleChange = this.handleChange.bind(this);
6    this.handleSubmit = this.handleSubmit.bind(this);
7  }
8
9  handleChange(event) {    this.setState({value: event.target.value});  }
10  handleSubmit(event) {
11    alert('Your favorite flavor is: ' + this.state.value);
12    event.preventDefault();
13  }
14
15  render() {
16    return (
17      <form onSubmit={this.handleSubmit}>
18        <label>
19          Pick your favorite flavor:
20          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">Grapefruit</option>
21            <option value="lime">Lime</option>
22            <option value="coconut">Coconut</option>
23            <option value="mango">Mango</option>
24          </select>
25        </label>
26        <input type="submit" value="Submit" />
27      </form>
28    );
29  }
30}

1yarn add react-select
2

1const [selected,setSelected]=useState(null)
2
3return(
4    <select value={selected} onChange={setSelected}>            
5           <option value="grapefruit">Grapefruit</option>
6            <option value="lime">Lime</option>
7            <option value="coconut">Coconut</option>
8            <option value="mango">Mango</option>
9    </select>
10)
11
12

1npm i --save react-select // with npm
2

1yarn add react-select
2or 
3npm i react-select