In HTML, <select> creates a drop-down list. For example, this HTML creates a drop-down list of flavors:<\/p>\n
<select><\/p>\n
<option value=”grapefruit”>Grapefruit<\/option><\/p>\n
<option value=”lime”>Lime<\/option><\/p>\n
<option selected value=”coconut”>Coconut<\/option><\/p>\n
<option value=”mango”>Mango<\/option><\/p>\n
<\/select><\/p>\n
Note that the Coconut option is initially selected, because of the selected attribute. React, instead of using this selected attribute, uses a value attribute on the root select tag. This is more convenient in a controlled component because you only need to update it in one place. For example:<\/p>\n
class FlavorForm extends React.Component {<\/p>\n
constructor(props) {<\/p>\n
super(props);<\/p>\n
this.state = {value: ‘coconut’};<\/p>\n
this.handleChange = this.handleChange.bind(this);<\/p>\n
this.handleSubmit = this.handleSubmit.bind(this);<\/p>\n
}<\/p>\n
handleChange(event) {<\/p>\n
this.setState({value: event.target.value});<\/p>\n
}<\/p>\n
handleSubmit(event) {<\/p>\n
alert(‘Your favorite flavor is: ‘ + this.state.value);<\/p>\n
event.preventDefault();<\/p>\n
}<\/p>\n
render() {<\/p>\n
return (<\/p>\n
<form onSubmit={this.handleSubmit}><\/p>\n
<label><\/p>\n
Pick your favorite flavor:<\/p>\n
<select value={this.state.value} onChange={this.handleChange}><\/p>\n
<option value=”grapefruit”>Grapefruit<\/option><\/p>\n
<option value=”lime”>Lime<\/option><\/p>\n
<option value=”coconut”>Coconut<\/option><\/p>\n
<option value=”mango”>Mango<\/option><\/p>\n
<\/select><\/p>\n
<\/label><\/p>\n
<input type=”submit” value=”Submit” \/><\/p>\n
<\/form><\/p>\n
);<\/p>\n
}<\/p>\n
}<\/p>\n
Overall, this makes it so that <input type=”text”>, <textarea>, and <select> all work very similarly – they all accept a value attribute that you can use to implement a controlled component.<\/p>\n","protected":false},"excerpt":{"rendered":"
In HTML, <select> creates a drop-down list. For example, this HTML creates a drop-down list of flavors: <select> <option value=”grapefruit”>Grapefruit<\/option> <option value=”lime”>Lime<\/option> <option selected value=”coconut”>Coconut<\/option> <option value=”mango”>Mango<\/option> <\/select> Note that the Coconut option is initially selected, because of the selected attribute. React, instead of using this selected attribute, uses a value attribute on the root…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8596],"class_list":["post-74353","page","type-page","status-publish","hentry","category-reactjs","tag-reactjs-and-select-tag"],"acf":[],"yoast_head":"\n