How to store and update objects in React useState hook

In my previous article, I have explained how to store and update arrays in useState hook. In this article, we will see how to modify the objects stored using the useState hook.

Project Setup

Create a react project using the following command:

1npx create-react-app react-usestate-object

Updating the state object

Let's create 2 fields with firstName and lastName:

App.jsx

1import { useState } from "react"
2
3function App() {
4  const [name, setName] = useState({ firstName: "", lastName: "" })
5
6  return (
7    <div className="App">
8      <div>
9        <label htmlFor="firstName">First Name: </label>
10        <input
11          type="text"
12          name="firstName"
13          id="firstName"
14          value={name.firstName}
15        />
16      </div>
17      <div>
18        <label htmlFor="lastName">Last Name: </label>
19        <input
20          type="text"
21          name="lastName"
22          id="lastName"
23          value={name.lastName}
24        />
25      </div>
26      <div>
27        Name is: {name.firstName} {name.lastName}
28      </div>
29    </div>
30  )
31}
32
33export default App

Here we have the name object as the local state to store the firstName and lastName. Currently, these fields are read-only.

Let's go ahead and add onChange functions to these fields and update the state object when the users type in the input field:

App.js

1import { useState } from "react"
2
3function App() {
4  const [name, setName] = useState({ firstName: "", lastName: "" })
5
6  const setFirstName = e => {
7    setName(existingValues => ({
8      // Retain the existing values
9      ...existingValues,
10      // update the firstName
11      firstName: e.target.value,
12    }))
13  }
14
15  const setLastName = e => {
16    setName(existingValues => ({
17      // Retain the existing values
18      ...existingValues,
19      // update the lastName
20      lastName: e.target.value,
21    }))
22  }
23
24  return (
25    <div className="App">
26      <div>
27        <label htmlFor="firstName">First Name: </label>
28        <input
29          type="text"
30          name="firstName"
31          id="firstName"
32          value={name.firstName}
33          onChange={setFirstName}
34        />
35      </div>
36      <div>
37        <label htmlFor="lastName">Last Name: </label>
38        <input
39          type="text"
40          name="lastName"
41          id="lastName"
42          value={name.lastName}
43          onChange={setLastName}
44        />
45      </div>
46      <div>
47        Name is: {name.firstName} {name.lastName}
48      </div>
49    </div>
50  )
51}
52
53export default App

Here, we make use of the spread operator to retain the existing values and update only the required values.

Combining the update to a single function

Since the functionality in updating both the fields are same, we can write a common update function as shown below:

App.jsx

1import { useState } from "react"
2
3function App() {
4  const [name, setName] = useState({ firstName: "", lastName: "" })
5
6  const updateName = e => {
7    const fieldName = e.target.name
8    setName(existingValues => ({
9      // Retain the existing values
10      ...existingValues,
11      // update the current field
12      [fieldName]: e.target.value,
13    }))
14  }
15
16  return (
17    <div className="App">
18      <div>
19        <label htmlFor="firstName">First Name: </label>
20        <input
21          type="text"
22          name="firstName"
23          id="firstName"
24          value={name.firstName}
25          onChange={updateName}
26        />
27      </div>
28      <div>
29        <label htmlFor="lastName">Last Name: </label>
30        <input
31          type="text"
32          name="lastName"
33          id="lastName"
34          value={name.lastName}
35          onChange={updateName}
36        />
37      </div>
38      <div>
39        Name is: {name.firstName} {name.lastName}
40      </div>
41    </div>
42  )
43}
44
45export default App

Here we have used [variableContainingPropertyName] notation to set the appropriate object value.

If there are many fields, you can make use of the useReducer hook, which helps for form validation as well.

Do follow me on twitter where I post developer insights more often!

How to store and update objects in React useState hook

Table of Contents

Project Setup

Updating the state object

Combining the update to a single function

Related Articles

Leave a Comment

Tools