How to submit a form with React
Tags: react, javascript, frontend
Published: 2019-12-03 13:56:05

---
title: How to submit a form with React
published: true
description: We build a form and call an addItem function in the parent component
tags: react, javascript, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191015-form-submit.jpeg
---

## 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:

```js
<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:

```js
[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:

```js
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.

```js
<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](https://cesare.substack.com).*