Adding an item to a remote collection in React

How to use Axios to connect to a remote API and add an item

(See bottom for links to previous articles in this series).

The story so far:

In our React application we use the Axios library to connect to a remote API and retrieve items that live on a remote server.

We also want to use Axios to add a new item to the collection.
So far we have prepared a New Item form that collects data about the new item, like the item name, description, price, etc.
The form saves the data in the ItemForm component state.
The next step is to submit the data to the remote API.

How do we submit the data?

We set up the form so when the submit button is pressed a function called handleSubmit is invoked.

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

handleSubmit in turn invokes another function, called addItem, defined in App.js which is the parent component of ItemForm.

Let's look at addItem now.

addItem only needs to take the new item object, passed to it as an argument, and tell Axios to make a post request to the remote API, passing along the item in the request body. Axios will do its thing, and will return either a response or an error.

If the connection is successful, the response will contain all the items in the remote collection.

If something went wrong, we will get an error back and we will print it to the console so we can debug it.

Here's addItem inside App.js:

// App.js

addItem = item => {
  axios.post("http://localhost:3333/items", item)
    .then(response => {
      this.setState({items: response.data});
    })
    .catch(error => console.log(error));
}

Let's look at this code in more detail. In particular, let's see what happens inside the .then() call.

    .then(response => {
      this.setState({items: response.data});
    })

Inside .then() we tell setState to update the state with whatever is returned by the remote API when a new item is added.

response.data contains an array of all the items currently in the collection. How do we know this? Because we looked at the remote API documentation.

APIs can return whatever they want and we have no way of knowing in advance what we get back. We need to look at the API code or its documentation to know for sure.

In our case, the API we are connecting to returns the array of all the items in a collection after adding one item. So, response.data will contain all the items plus the new item we have just added.

Now, our functionality works correctly, but the user experience is lacking.
The way the application works now, the user won't be able to tell that a new item has been added, because everything happened behind the scenes and there's no indication on the screen that something even happened.

The user would need to navigate to the items list page to find the new item displayed at the end of our list.

One way to improve this experience is to redirect the browser to the item list page automatically.
We can do that by using the history property of the Route component.

history is like an array where we can push URLs onto its end and it will navigate to that path.
We could do something like this after updating the state:

this.props.history.push("/items");

This normally works, but in our specific case we have a problem.

The problem is that the App component is not wrapped inside a Route, so it has no history prop defined. We need a way to add this prop to App and react-router-dom provides the perfect solution for this problem.

We will look at how to implement this solution tomorrow.

You can view previous articles in this series here:

Add a new item to a collection with Axios

Handling input field updates in React

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.