How to submit a form with React

#react #javascript #frontend

We build a form and call an addItem function in the parent component

We have a React application that displays a list of items that were accessed from a remote API using Axios.
We also want to create a new item and post it to the remote server, so it can be added to the item collection.

So far we have a form component, called ItemForm, that collects the item name and updates the state with the name entered.
But our new item has extra attributes apart from the name, so we need to add extra fields to handle these attributes. We also need to create a function that fires when the form is submitted and transmits the new item data so it can be added to the remote collection.

Let's add these extra fields to our form:

<form>
  <input
    type="text"
    name="price"
    onChange={this.changeHandler}
    placeholder="Price"
    value={this.state.item.price}
  />

  <input
    type="text"
    name="imageUrl"
    onChange={this.changeHandler}
    placeholder="Image URL"
    value={this.state.item.imageUrl}
  />

  <input
    type="text"
    name="description"
    onChange={this.changeHandler}
    placeholder="Description"
    value={this.state.item.description}
  />

  <button>Add new item</button>
</form>

Now we have all the required fields. If you notice, each field value is taken from the ItemForm state property with the corresponding name.
Each field has an onChange property that looks for changes in the field and updates the state through the changeHandler function.

Since changeHandler is designed to handle any field name, we don't have to update it to include the extra fields we have just added. It will work seamlessly thanks to this syntax that we used in the function definition:

[e.target.name]: value

Each field name is evaluated automatically from the name property of input.
As long as the field name prop corresponds to an existing item property the value is assigned to the correct property of the state every time the change event is fired.

The next thing we need to do is to invoke a function when the form is submitted.

The function needs to call another function, that is defined in the App.js component, that will actually add the item to the remote database.

The reason why we define the addItem function in App.js is because the App component has the responsibility to keep the state of the collection, so it makes sense to use App when we have to add an item to the collection.

The function we call when the form is submitted by clicking the submit button is called handleSubmit. Here it is:

handleSubmit = event => {
  event.preventDefault();
  this.props.addItem(this.state.item);
}

handleSubmit has a simple job. It just calls the addItem function in App.js and passes the item object that was saved in the state in FormItem.

The function also blocks the default action that is generated by the browser when a submit button is pressed. The browser tries to reload the page by default, but we want to have control on this action, so we prevent the default from happening.

Since addItem is defined in App.js, we need to pass this function down to ItemForm in the props, that's why we say this.props.addItem.
In order for handleSubmit to be called, we need to add it to the onSubmit prop on the form. onSubmit watches for form submits and invokes the function we pass to it.

<form onSubmit={this.handleSubmit}>

  ...

</form>

Great, now our form is finished and ready to send the new item data to App.js in order to be added to the items collection.
We will look at how to actually call Axios and add the item in the next article.

I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.

You can receive articles like this in your inbox by subscribing to my newsletter.