updating two state in parallel without using useReducer

Question

In this code when I click the delete button I get this error:

App.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

I realized the reason is that I must update the state of selectedNumber before updating the numbers state. I understand that it is impossible to do it just with useState. I realized I could do it with useReducer. Am I right or there is another way to do it without useReducer?

import { useState } from "react";

const App = () => {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5, 6]);
  const [selectedNumber, setselectedNumber] = useState(1);

  return (
    <div>
      <ul>
        {numbers.map((number) => {
          return (
            <li
              key={number}
              onClick={() => setselectedNumber(number)}
              style={
                number === selectedNumber ? { color: "blue" } : { color: "red" }
              }
            >
              {number}
            </li>
          );
        })}
      </ul>
      <div>
        {selectedNumber}
        <button
          onClick={() =>
            setNumbers((prev) => {
              prev.filter((number) => number !== selectedNumber);
            })
          }
        >
          delete
        </button>
      </div>
    </div>
  );
};

export default App;

score 2 · Answer 1 · answered Dec 22 '21 at 19:41

You're not returning anything in the callback passed to setNumbers. So, undefined will be returned and the new state becomes undefined leading to undefined.map(...

<button
    onClick={() =>
        setNumbers((prev) => {
            return prev.filter((number) => number !== selectedNumber);
        })
    }
>
    delete
</button>

btw, useReducer is not needed as your state is not that complex

updating two state in parallel without using useReducer

1 Answers1