Why does the Cannot read property 'map' of undefined error occur?

Question

React

The code renders a list with a delete button, an input, and a button.
By clicking on the "X" button, the deleteLi function is called, which should delete the list item. But an error comes out:

TypeError: Cannot read property 'map' of undefined

import React, { useState } from 'react';

const  Task = () => {
    const [users, setUsers] = useState({user:['user1', 'user2', 'user3']});
    const [li, setLi] = useState('');

    const deleteLi = (index) => {
        setUsers(users.user.filter((item,i) => i !== index));
    };

    const list = users.user.map((item, index)=>(
        <li key={index}>
            {item}
            <button onClick = {()=>deleteLi(index)}> Х </button>
        </li>
    ));
    
    const handleChange = (e) => setLi(e.target.value);
    const handleClick = () => setUsers({user:[...users.user, li]});
    
    return <div>
        <ul>{list}</ul>
        <input type="text" onChange = {handleChange}/>
        <input type="submit" onClick = {handleClick}/>
    </div>
};

export default Task;

What is the cause of the error and how can I fix it?

Answer 1

const [users, setUsers] = useState({user:['user1', 'user2', 'user3']});

Here users is an object whose only property is an array.

setUsers(users.user.filter((item,i) => i !== index));

And here is an array.

const list = users.user.map(...

You try to read the user property of this array, which does not exist, you get undefined, and then ... Well, you have already seen the error message.
You would decide what users should be.