The Dropdown component is used to present the user a list of values where they can select a single option.
Define the dropdown menu options. Each entry must have a name and a value.
0
const SELECT_MENU_OPTIONS = [
1
{ value: "1", name: "Capricorn" },
2
{ value: "2", name: "Aquarius" },
3
{ value: "3", name: "Pisces" },
4
{ value: "4", name: "Aries" },
5
{ value: "5", name: "Taurus" },
6
{ value: "6", name: "Gemini" },
7
{ value: "7", name: "Cancer" },
8
{ value: "8", name: "Leo" },
9
{ value: "9", name: "Virgo" },
10
{ value: "10", name: "Libra" },
11
{ value: "11", name: "Scorpio" },
12
{ value: "12", name: "Sagittarus" },
Declare the Dropdown component. Default values can be assigned using value.
0
class ExampleOne extends React.Component {
1
state = { exampleOne: "1" };
3
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
8
label="Pick a horoscope"
10
value={this.state.exampleOne}
12
onChange={this._handleChange}
13
options={SELECT_MENU_OPTIONS}
19
class ExampleTwo extends React.Component {
20
state = { exampleTwo: "3" };
22
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
27
label="Pick a horoscope (full length)"
30
value={this.state.exampleTwo}
32
onChange={this._handleChange}
33
options={SELECT_MENU_OPTIONS}
Declare a dropdown to select from a list of countries.
0
class ExampleThree extends React.Component {
1
state = { exampleThree: "United States of America" };
3
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
8
label="Pick your country"
11
value={this.state.countryMenu}
13
onChange={this._handleChange}