How to set state in nested object

Question

Would like to know if there is a way to update nested object states in React using useState()

import React, {useState} from 'react'

const MyComp = () => {

  const [colors, setColors] = useState({colorA: 'RED', colorB: 'PURPLE'});

  return (
    <div>
       <span>{colors.colorB}</span>
       <button onClick={() => setColors({...colors, colors: { colorB: 'WHITE'}})}>CLICK ME</button>
    </div>
  )
}


export default MyComp;

I was thinking to use useReducer() but I read that It's normally use for more complex states and maybe there is a solution for this case just using useState()

Any ideas?

Thx in advance

Does this answer your question? [React Hooks useState() with Object](https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object) — PEPEGA, Dec 03 '19 at 11:33

score 4 · Answer 1 · answered Dec 03 '19 at 11:28

4

colors already is the whole object, you don't need to declare as a property.

spread the original object and override colorB

() => setColors({...colors, colorB: 'WHITE'})

answered Dec 03 '19 at 11:28

Dupocas

20,285
6
38
56

score 4 · Answer 2 · answered Dec 03 '19 at 11:28

4

You are updating the state in a wrong way. Change your button statement to below,

<button onClick={() => setColors({...colors, colorB: 'WHITE'})}>CLICK ME</button>

answered Dec 03 '19 at 11:28

Gangadhar Gandi

2,162
12
19

score 4 · Answer 3 · answered Dec 03 '19 at 11:31

4

USE

setColors({...colors, colorB: 'WHITE'})

INSTEAD OF

setColors({...colors, colors: { colorB: 'WHITE'}})

answered Dec 03 '19 at 11:31

Simon Gomes

383
1
5
18

score 3 · Answer 4 · answered Dec 03 '19 at 11:29

It's better to use functional form of setState for this, since the next state value depends on the current value of the state:

 return (
    <div>
      <span>{colors.colorB}</span>
      <button
        onClick={() => setColors(currentColors => ({ ...currentColors, colorB: "WHITE" }))}
      >
        CLICK ME
      </button>
    </div>
  );

score 2 · Accepted Answer · answered Dec 03 '19 at 11:32

Since you have already done the spread, it will have the property colorB, you just need to update with new value

const handleButtonClick = () => {
    setColors({ ...colors, colorB: "WHITE" });
  };

making it into a function will be more readable.

Code

import React, { useState } from "react";
import ReactDOM from "react-dom";

const MyComp = () => {
  const [colors, setColors] = useState({ colorA: "RED", colorB: "PURPLE" });

  const handleButtonClick = () => {
    setColors({ ...colors, colorB: "WHITE" });
  };

  return (
    <div>
      <span>{colors.colorB}</span>
      <button onClick={handleButtonClick}>CLICK ME</button>
    </div>
  );
};

export default MyComp;

const rootElement = document.getElementById("root");
ReactDOM.render(<MyComp />, rootElement);

Working Codepen

Snivio · Answer 6 · 2020-03-19T09:15:21.330

0

There was a minor syntax error in the statement

 const App = () => {


  const [colors, setColors] = useState({ colorA: 'RED', colorB: 'PURPLE' });

  return (
    <div>
      <span>{colors.colorB}</span>
      <button onClick={
        () =>
          setColors(
            { ...colors,colorB: 'WHITE' }
          )
      }>CLICK ME</button>
    </div>
  )
}

edited Mar 19 '20 at 09:15

answered Dec 03 '19 at 11:38

Snivio

1,741
1
17
25

How to set state in nested object

6 Answers6