Suggest an edit

Improve this article

Refine the answer for “How do you update an array element in state?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Main idea

In React, state **must be immutable** -
you cannot change an array directly (`push`, `splice`, index assignment).

Instead you need to create a **new array** with the needed changes
and pass it to `setState`.

---

## Example 1. Updating an element by index

```javascript
function App() {
  const [numbers, setNumbers] = useState([10, 20, 30]);

const updateSecond = () => {
    setNumbers(prev =>
      prev.map((num, i) => (i === 1 ? num + 5 : num))
    );
  };

return (
    <div>
      <p>{numbers.join(", ")}</p>
      <button onClick={updateSecond}>Change second element</button>
    </div>
  );
}
```

`map()` creates a **new array**
We change only the element where `i === 1`
The rest stay unchanged

Result:

```javascript
[10, 20, 30] → [10, 25, 30]
```

---

## Example 2. Updating by condition (for example, by id)

State very often holds objects:

```javascript
const [users, setUsers] = useState([
  { id: 1, name: "Alex", active: false },
  { id: 2, name: "Tim", active: true },
]);
```

You want to update a specific user:

```javascript
const toggleActive = (id) => {
  setUsers(prev =>
    prev.map(user =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};
```

What happens:

- `map()` creates a new array
- if the id matches -> we create a **new object** (immutably)
- otherwise we return the old object

---

## Example 3. Updating by index (array copy variant)

You can do it manually:

```javascript
const [items, setItems] = useState(["apple", "banana", "cherry"]);

const changeBanana = () => {
  const copy = [...items];     // create a copy
  copy[1] = "mango";           // change the element in the copy
  setItems(copy);              // update state
};
```

Never do this:

```javascript
items[1] = "mango"; // mutates the array
setItems(items);     // React will not notice the change
```

---

## Example 4. Updating a nested array in an object

```javascript
const [cart, setCart] = useState({
  items: [
    { id: 1, name: "Shirt", qty: 1 },
    { id: 2, name: "Pants", qty: 2 },
  ],
});

const incrementQty = (id) => {
  setCart(prev => ({
    ...prev,
    items: prev.items.map(item =>
      item.id === id ? { ...item, qty: item.qty + 1 } : item
    ),
  }));
};
```

Here:

- we copy the `cart` object (`...prev`)
- inside it we update the `items` array immutably through `map()`

---

## 5. When to use which approach

| Task | Approach |
|---|---|
| Change by index | `map()` or a copy with `[...arr]` |
| Change by `id` | `map()` with a condition |
| Update a nested object | Copy both the outer and inner levels |
| Add an element | `[...arr, newItem]` |
| Remove an element | `arr.filter(...)` |

---

## Summary

| What not to do | What to do instead |
|---|---|
| `array[index] = value` | `setArray(prev => prev.map(...))` |
| `array.push(value)` | `setArray(prev => [...prev, value])` |
| `array.splice(i,1)` | `setArray(prev => prev.filter(...))` |
| `array.sort()` | `setArray(prev => [...prev].sort(...))` |

---

## Remember

> Never mutate the state array directly.
> Always create a **new array or object**.
> React compares **references**, not content.
> Use `map()`, `filter()`, `slice()`, spread (`...`).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts521 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.