How do you create a very, very simple dropdown select with React? Nothing seem to work.
I have an array: var num = [1,2,3,4,5]
Function:
num(e){
this.setState({selected: e.target.value});
}
In the render:
<select option="{num}" value={this.state.selected} onChange={this.num} />
No error message, no nothing. I normally use npm plugin for this but I only need something basic.
Setting option={num} will not work in jsx. You need to use <option> tags:
Something like this is what you are after:
<select name="select" onChange={this.num}>
{num.map(function(n) {
return (<option value={n} selected={this.state.selected === n}>{n}</option>);
})}
</select>
If you are learning React, I believe this gets to the heart of what you were asking. Here is the JSX:
<select name="category" value={category} onChange={event => handleCategoryChange(event.target.value)}>
<option id="0" >Personal</option>
<option id="1" >Work</option>
</select>
And here is the on change handler:
const [category, setCategory] = React.useState('');
const handleCategoryChange = (category) => {
setCategory(category);
console.log(category);
}
event => handleCategoryChange(event.target.value) solved it. In my case I just had to add "event" as an argument when calling.React doc answers this question here.
function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
// ...
return (
<select
value={selectedFruit} // ...force the select's value to match the state variable...
onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
);
}
option="{num}". You need<option>tags.