<div id="root"></div>
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
bookTypes: ["paperback"]
};
this.handleChange = this.handleChange.bind(this);
}
handleChange = (e) => {
this.setState({
bookTypes: [...e.target.selectedOptions].map((option) => option.value)
});
};
handleSubmit = (e) => {
e.preventDefault();
alert(`Selected values: ${JSON.stringify(this.state.bookTypes)}`);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<select
multiple={true}
value={this.state.bookTypes}
onChange={this.handleChange}
>
<option value="ebook">Ebook</option>
<option value="paperback">Paperback</option>
<option value="hardcover">Hardcover</option>
</select>
<button>Submit</button>
</form>
);
}
}
ReactDOM.render(<Form />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.