Step 7

We must now handle the "form submission", that is when user clicks on "ADD MEETING".

Add the following method to CreateMeeting component:

handleSubmit(event) {
  alert("A meeting was added: " + JSON.stringify(this.state));
  event.preventDefault();
}

This method, add the moment, only shows an alert that form is submitted.

Note: A form has the default HTML form behavior of browsing to a new page when the user submits the form. Here the handleSubmit "prevents" the default behavior and gives you more control on what data to be submitted to what endpoint. We will update the handleSubmit to "create" a new meeting (save it to the state of the App).

Make sure to bind handSubmit to CreateMeeting; add the following to the constructor:

this.handleSubmit = this.handleSubmit.bind(this);

Finally, add onSubmit attribute to the form element:

- <form className="create-meeting-form" >
+ <form className="create-meeting-form" onSubmit={this.handleSubmit}>

Save the file and revisit the app in your browser, and try to add a meeting.

You can learn more on using HTML forms in React application by reading the React Documentations: Forms. There are also third-party React components, such as formik, that you can use in place of plain forms.