Complex state not updating correctly

Question

Greeting:

I don't believe I am updating my complex state properly:

export const App = () => {
  const [combos, setCombos] = useState({
    combo1: { data: [1, 2, 3, 4, 5], selected: "" },
    combo2: { data: [8, 9, 10, 11, 12], selected: "" }
  });
  return (
    <div>
      <button  onClick={() => setCombos((ps) => ({ ...ps, combo1: { selected: "" }}}>
        Click Me
      </button>
      <div>
        Combo 1 has a "data" key:{combos.combo1.hasOwnProperty("data") ? "Yes" :No"}
      </div>
    </div>
  );
};

How do I properly update this state? Thanks!

https://codesandbox.io/s/intelligent-ellis-qi97k?file=/src/App.js

There's also typos in the code (missing some closing parentheses). — Emile Bergeron, Oct 29 '21 at 19:02
`setCombos((ps) => ({ ...ps, combo1: { ...ps.combo1, selected: "" }}))` but the gist of it is to spread the nested `combo1` object to avoid losing its other properties. — Emile Bergeron, Oct 29 '21 at 19:03
Does this code do what you want it to? If not, what the result are getting? What is the result you expect? — Alex Wayne, Oct 29 '21 at 19:03
Thanks Emile...Your responses were helpful. Alex - please re-read the question. All the information is there. — Elcid_91, Oct 29 '21 at 19:13

Sahid Hossen · Accepted Answer · 2021-10-29T19:15:34.357

You have to use the spread operator also into combo1 property when you set the state. Data property will miss if you update only the selected property.

export const App = () => {
  const [combos, setCombos] = useState({
    combo1: { data: [1, 2, 3, 4, 5], selected: "" },
    combo2: { data: [8, 9, 10, 11, 12], selected: "" }
  });
  return (
    <div>
      <button  onClick={() => setCombos((ps) => ({ ...ps, combo1: { ...ps.combo1, selected: "" }}}>
        Click Me
      </button>
      <div>
        Combo 1 has a "data" key:{combos.combo1.hasOwnProperty("data") ? "Yes" :No"}
      </div>
    </div>
  );
};

Complex state not updating correctly

1 Answers1