EN
React - how to pass array of options to select
3 points
In this article, we would like to answer for the question: How to set options
array in <select>
element in React.
The answer is: by default <select>
element doesn't provide options
property, so we should put <options>
elements inside <select>
element or create simple <Select>
component, what was shown in the article.
Quick solution:
xxxxxxxxxx
1
const options = [
2
{value: 'value-1', text: 'text-1'},
3
{value: 'value-2', text: 'text-2'},
4
{value: 'value-3', text: 'text-3'}
5
];
6
7
<select value="value-2" onChange={handleChange}>
8
{options.map(item => {
9
return (<option key={item.value} value={item.value}>{item.text}</option>);
10
})}
11
</select>
This section contains <select>
with nested <option>
elements inside like in classic HTML.
xxxxxxxxxx
1
//Note: Uncomment import lines during working with JSX Compiler.
2
// import React from 'react';
3
// import ReactDOM from 'react-dom';
4
5
const colors = [
6
{value: 'red', text: 'Red' },
7
{value: 'yellow', text: 'Yellow'},
8
{value: 'blue', text: 'Blue' }
9
];
10
11
const App = () => {
12
const [color, setColor] = React.useState('red');
13
const handleChange = e => setColor(e.target.value);
14
const handleSubmit = e => {
15
e.preventDefault();
16
const data = {
17
color: color
18
};
19
const json = JSON.stringify(data);
20
console.clear();
21
console.log(json);
22
};
23
return (
24
<form onSubmit={handleSubmit}>
25
<div>
26
<label>
27
Choose your favorite color:
28
<select value={color} onChange={handleChange}>
29
{colors.map(item => {
30
return (<option key={item.value} value={item.value}>{item.text}</option>);
31
})}
32
</select>
33
</label>
34
</div>
35
<button type='submit'>Submit</button>
36
</form>
37
);
38
};
39
40
const root = document.querySelector('#root');
41
ReactDOM.render(<App />, root);
This section we use custom <Select>
component that lets us to pass options
as array in property.
xxxxxxxxxx
1
//Note: Uncomment import lines during working with JSX Compiler.
2
// import React from 'react';
3
// import ReactDOM from 'react-dom';
4
5
const Select = ({value, options, onChange}) => {
6
return (
7
<select value={value} onChange={onChange}>
8
{options.map(option => {
9
return (<option key={option.value} value={option.value}>{option.text}</option>);
10
})}
11
</select>
12
);
13
};
14
15
const colors = [
16
{value: 'red', text: 'Red' },
17
{value: 'yellow', text: 'Yellow'},
18
{value: 'blue', text: 'Blue' }
19
];
20
21
const App = () => {
22
const [color, setColor] = React.useState('red');
23
const handleChange = e => setColor(e.target.value);
24
const handleSubmit = e => {
25
e.preventDefault();
26
const data = {
27
color: color
28
};
29
const json = JSON.stringify(data);
30
console.clear();
31
console.log(json);
32
};
33
return (
34
<form onSubmit={handleSubmit}>
35
<div>
36
<label>
37
<span>Choose your favorite color:</span>
38
<Select value={color} options={colors} onChange={handleChange} />
39
</label>
40
</div>
41
<button type='submit'>Submit</button>
42
</form>
43
);
44
};
45
46
const root = document.querySelector('#root');
47
ReactDOM.render(<App />, root);