What does "Cannot destructure property 'name' of 'existing user' because it is undefined. Update.js:13" mean?

Question

I want to update user data. I successfully get existing user data, but not updated. The above error is displayed. When I remove an equal sign from the line below, the error is removed but the user data is still not updated.

const existingUser = users.userList.filter(f => f.id == id);

import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';
import { updateUser } from '../redux/slice/userReducer';

const Update = () => {
  const { id } = useParams();
  //console.log(id)

  const users = useSelector((state) => state.users);
  const existingUser = users.userList.filter(f => f.id === id);
  //console.log(existingUser);

  const { name, email } = existingUser[0];
  const [uname, setName] = useState(name);
  const [uemail, setEmail] = useState(email);

  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleUpdate = (event) => {
    event.preventDefault();
    dispatch(updateUser({
      id: id,
      name: name,
      email: email
    }));
    navigate('/');
  }

  return (
    <div className='d-flex w-100 vh-100 justify-content-center align-items-center'>
      <div className='w-50 border bg-secondary text-white p-5'>
        <h3>Update User</h3>
        <form onSubmit={handleUpdate}>
          <div>
            <label htmlFor='name'>Name:</label>
            <input
              type='text'
              name='name'
              className='form-control'
              placeholder='enter name'
              value={uname}
              onChange={e => setName(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor='name'>Email:</label>
            <input
              type='email'
              name='email'
              className='form-control'
              placeholder='enter email'
              value={uemail}
              onChange={e => setEmail(e.target.value)}
            />
          </div>
          <br />
          <button className='btn btn-info'>Update</button>
        </form>
      </div>
    </div>
  )
}

export default Update

Answer 1

I'm not sure what your data structure is, but from the code provided I can explain and guess what the problem is.

The error you are receiving means that the 0th element of your existingUser does not exist. Since existingUser comes from a filter and the filter returns an array, we can assume that the condition within the filter is not satisfied for any element.

When you say changing === to == will make it work, we can guess that f.id and id are not the same type. Maybe one is a string and the other an integer.

Using == actually solves your original problem. But if you want to use === you can try changing the type of the value. For example, if id is a string and f.id is an integer, you can write the condition like this:

f.id === parseInt(id)

You can find out the difference by doing a Google search.

Your next problem is that after fixing the above error, the data is not updated. This is because of the design pattern you are using in your component. useState only takes an initial value and does not change throughout the component's lifetime unless you update it using setState.

Since you are using useSelector and dispatch, I assume you are using redux. In this case, I don't think useState is needed. You just use the name and email deconstructed from existingUser[0] and they will be rendered whenever you send an update Code>.