Add a new item to a collection with Axios
Tags: react, axios, frontend
Published: 2019-11-29 14:09:56

---
title: Add a new item to a collection with Axios
published: true
description: How to make a POST request in a React application
tags: react, axios, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191013-add-item1.jpeg
---

## How to make a POST request in a React application

We have seen in previous articles how to grab a collection of items in a `GET` request using the Axios library in our React application.
Let's see now how to add a new item to our collection.

Our objective is to add a link to our list of items view.
Clicking on this link will display a New Item form. This form will have fields for item name, description, price, etc. Once the form is filled it will be submitted and a new item will be created in our collection.

![Add item form](https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191013-add-item2.jpeg)

In order to do this we need to create a few things:

1. a new link in the item list that shows the form
2. a route that loads the form component
3. an actual form component, called `ItemForm`

In this article we will stop at creating and showing the `ItemForm`. We will learn how to submit the form in a future article.

Since we have a clear roadmap of what we have to build, let's start by creating a link to access the form.
In our item list component, we add a link to the new item form.

```js
<Link to="/item-form">Add a new item</Link>
```

We also must remember to import the `Link` component from `react-router-dom`:

```js
import { Link } from 'react-router-dom';
```

In order for the link to work, we also need to create a route that points to the `ItemForm` component:

```js
<Route
  path="/item-form"
  render={props => <ItemForm {...props} />}
/>
```

We add this route to `App.js`, where all the other routes are defined.

Now that we have a link and a route, we only need to create the actual `ItemForm` component in `components/ItemForm.js`.

### Create the ItemForm component

Let's start by fleshing out the basic structure of a React class component.

```js
class ItemForm extends React.Component {
  render() {
    return (
      <div>
        <h2>Add new item</h2>
        <form>

          <button>Add new item</button>
        </form>
      </div>
    )
  }
}
```

Let's stop and think for a moment: what's the job of this component?
This component has two jobs to do.

Job number one is to capture some data from the user.
To perform this job, `ItemForm` displays form fields where data is entered. The data is what's needed to create a new Item, that is: the item *name*, *description*, *image url*, and *price*.

The second job `ItemForm` has to do is send this captured data to its parent component, `App.js`, so a new item can be created.
This job of sending data to its parent is handled by a function inside `ItemForm` called `handleSubmit()` that we are going to write shortly.

ItemForm doesn't have to worry about actually creating the new Item. The actual Item creation is handled by `App.js`.

But there is one extra thing that `ItemForm` needs in order to perform its two jobs well. It needs a place to keep track of data entered in the form fields, data that can be later neatly packaged into an object to be sent to `App.js`.

![Packaged data](https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191013-add-item3.jpeg)

In other words, `ItemForm` needs some *state* where it can hold the new item data entered into its fields until it's submitted.

Let's add state to the `ItemForm` component. Inside the state object we add an `item` property that represents the new item. We initialize the new `item` properties to empty strings, because we don't have any data yet:

```js
state = {
  item: {
      name: '',
      price: '',
      imageUrl: '',
      description: '',
    }
}
```

Let's summarize what we have done so far.
At this point we have a link in the item list that opens up a new item form. The form keeps the data necessary to create a new item in its state.

The form also has a submit button but there are no fields for entering data yet. That's what we are going to add next.

We'll see how to add form input fields 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).*