Form validation
"Shawn, I think we should also add basic validation to the BookList component so that the user can't go to the next step without selecting a book," said Mike.
"Agree. Let me give it a try." answered Shawn.
// src/BookStore.js
// Updating BookList component
var BookList = React.createClass({
getInitialState() {
return (
{ books: [
{ id: 1, name: 'Zero to One', author: 'Peter Thiel' },
{ id: 2, name: 'Monk who sold his Fearrary', author: 'Robin Sharma' },
{ id: 3, name: 'Wings of Fire', author: 'A.P.J. Abdul Kalam' }
],
selectedBooks: [],
error: false
}
);
},
_renderError() {
if (this.state.error) {
return (
<div className="alert alert-danger">
{this.state.error}
</div>
);
}
},
handleSubmit(event) {
event.preventDefault();
if(this.state.selectedBooks.length === 0) {
this.setState({error: 'Please choose at least one book to continue...