ReactJS by Example - Building Modern Web Applications with React

Form events

"Let's handle submitting the form now. React provides the onSubmit event for this purpose." said Mike.

// src/BookStore.js
……
// Updating BookStore component

render() {
    return(
      <div>
        <h3> Choose from wide variety of books available in our store </h3>
        <form onSubmit={this.handleSubmit}>
          {this.state.books.map((book) => { return (this._renderBook(book)) })}

          <input type="submit" className="btn btn-success" />
        </form>
      </div>
    );
  },

handleSubmit(event) {
    console.log(event);
    event.preventDefault();
    console.log("Form submitted");
   }
   ……

"Now, the next task is to get hold of all the books selected by the user. We can use state to achieve this." explained Mike.

// src/BookStore.js …… // Updating BookStore component getInitialState() { return ( { books: ...