Handling input field updates in React
Tags: react, javascript, frontend
Published: 2019-12-02 14:28:47

---
title: Handling input field updates in React
published: true
description: How to update component state from a form input field
tags: react, javascript, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191014-input-field-updates.jpeg
---

## How to update component state from a form input field

We have seen previously how to set up a basic form to collect item data that will be sent to a remote `API` via a `POST` request so it can create a new item in a resource collection.

The form we set up was so basic that it didn't even have fields in it, just the form skeleton and a submit button.
A proper form would have input fields so we can enter data and that's what we are going to do now.
We need input fields for `name`, `price`, `imageUrl`, and `description`. We are just going to use fields of type `"text"`.

### Adding an input field

Each input field will have a `name`, a `value`, a `placeholder` and an `onChange` property.
Let me show an example first, and we'll go over the details next:

```js
<input
  type="text"
  name="name"
  placeholder="Name"
  value={this.state.item.name}
  onChange={this.changeHandler}
/>
```

`<input />` is just a React input component with some props on it.

The first prop is the type of input: text in our case.

We then have a name prop. This is the name of the input field and it's set to the `name` property of the item we add to the collection.

The `placeholder` prop shows some placeholder text in the form field so the user knows what data to enter.

The value prop is more interesting. Its value is set to `this.state.item.name`. If you remember, we are in the `ItemForm` component, and this component has some state that holds the data we need to add.

Here's what the state object looks like:

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

`this.state.item.name` is currently set to an empty string, so the form field will not display anything in it. It's ready to take whatever the user is going to type in.

### `onChange` prop

The next prop in the input component is `onChange`. `onChange` is set to a function called `changeHandler`.

What is the `onChange` prop and why do we need the `changeHandler` function?

Every time the user types something into an input field, a browser event is generated.
The `onChange` prop tells React to listen to the change event and capture a variety of things, including the character that was typed in.
We need to grab this character, and all the other characters that are typed into the form, so we can save them into the state.

That's how we populate the value of our item object in the state.
This item object will be then sent to the function that actually creates a new item in our collection.

### The `changeHandler` function

Now, let's look at the `changeHandler` function.
Since it's associated with `onChange`, the `changeHandler` function is fired every time an event happens. So, every time we type a character in the form field, `changeHandler` is called.

`changeHandler` receives the event that's generated by our typing. It needs to extract the character that was typed in and add it to the correct property in the state.
Here's `changeHandler`:

```js
changeHandler = event => {
  event.persist();

  let value = event.target.value;

  this.setState(prevState => ({
    item: { ...prevState.item,  [event.target.name]: value }
  }))
};
```

As you can see, `changeHandler` is set to an arrow function that takes the event as an argument.
The event has a `target`, which is the input field itself. The input field has a `value`, which is the characters typed in at the moment.

So, in the first line of `changeHandler` we extract the value of the input field after the event is generated. This will be the character that is typed into the field at the moment.
We assign this value to the `value` variable so we can use it in the next statement where we update the state with `setState`.

`setState` takes the previous state as an argument, it then generates a new object that has *all the data* in the previous state plus the new value from the form field and replaces the state with this new object that represents the current state.
This operation effectively updates the state in a non destructive way.

### Why do we use `[event.target.name]`?

One confusing piece of code in this operation may be this:

```js
[event.target.name]: value
```

What is happening here?

We know what `value` is, it's the variable that holds the input field value.
`[event.target.name]` contains the value of the `name` property of the input field.
Here's the input field again:

```js
<input
  type="text"
  name="name"   // <-- event.target.name is set to "name" here
  placeholder="Name"
  value={this.state.item.name}
  onChange={this.changeHandler}
/>
```

There is a name prop set to the string `"name"`.
[`event.target.name]` captures this prop value and updates the state object with it. It's like if we said this:

```js
item: {...prevState.item, name: value}
```

So, why don't we just say `name` instead of `[event.target.name]`?
The reason is that by using `[event.target.name]` we are not tied to one specific input field. We can use this same syntax for any input field that has a `name` property.
So, when we have input fields that say:

```js
<input name="description" />
```

or

```js
<input name="price" />
```

`[event.target.name]` will be set to `"description"` and `"price"` respectively and update our state object correctly like so:

```js
item: {...prevState.item, description: value}

item: {...prevState.item, price: value}
```

### What we have we done so far.

So far we have added a form input and a function that updates our component state every time a new character is typed into the form field.

Now we need to add some more input fields to our form and send the state data to our parent component so a new item can be created. We will see how to do that 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).*