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;
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