implementing Array Spread Operator and Object Destructuring in React Hooks
This might be a silly question, but I'm working on a personal project and I'm running into a question when trying to manage state using React Hooks... I have an array of objects representing user data, and I'm attempting to update a specific user object in a functional component's state. Here's how I originally set up my state: ```javascript const [users, setUsers] = useState([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]); ``` When I want to update a user's name, I tried using the spread operator to create a new array like this: ```javascript const updateUser = (id, newName) => { setUsers(prevUsers => { return prevUsers.map(user => user.id === id ? { ...user, name: newName } : user ); }); }; ``` However, when I call `updateUser(1, 'Alicia')`, the console logs the following behavior: `TypeError: want to read properties of undefined (reading 'id')`. I've checked that `prevUsers` is indeed an array, and `user` seems to be getting correctly passed into the map function. I've also verified that the user with id `1` exists in the array before calling the function, yet I still encounter this scenario. I've tried various approaches, including logging the `prevUsers` and `user` values inside the map function, but they seem to return as expected. I'm on React version 17.0.2 and using React Hooks. Any insights into why this might be happening would be greatly appreciated! Additionally, would there be a more optimal way to handle such updates especially when dealing with larger datasets? This is part of a larger application I'm building. This is part of a larger API I'm building. Any help would be greatly appreciated! My development environment is macOS. What am I doing wrong?