setState not working in react hooks when using map

Question

What I'm trying to do is : after manipulating the data of each user in the "users" array I want to add it to a state called newUser, then push that new user to an array called newUsersList. How can I do that? (the users array here is simplified)

export default function App() {
  const users = [
    {
      nom: 'name 1',
      prenom: 'last name 1',
    },
    {
      nom: 'name 2',
      prenom: 'last name 2',
    },
    {
      nom: 'name 3',
      prenom: 'last name 3',
    },
    {
      nom: 'name 4',
      prenom: 'last name 4',
    },
    {
      nom: 'name 5',
      prenom: 'last name 5',
    },
    {
      nom: 'name 6',
      prenom: 'last name 6',
    },
  ];
  const [newUser, setNewUser] = useState({});
  const [newUsersList, setNewUsersList] = useState([]);
  const handleClick = () => {
    users.map((user) => {
      setNewUser(
        {
          firstName: user.nom,
          lastName: user.prenom,
        },
        newUsersList.push(newUser),
      );
      //newUsersList.push(newUser)
    });
  };

  // useEffect(() => {
  //   newUsersList.push(...users, newUser)
  // }, [newUser])

  return (
    <div className="App">
      <button onClick={handleClick}> Add Users </button>
      {newUsersList.map((user) => {
        return <h6> user name : {user.firstName} </h6>;
      })}
    </div>
  );
}

The problem here is that the setNewUser function is not working and as you can see I tried 3 solutions :

1. running newUsersList.push(newUser) after executing setNewUser
2. added newUsersList.push(newUser) as a second parameter to setNewUser
3. called newUsersList.push(newUser) inside useEffect when the newUser state changes

None of these solutions is working.

Runnable code: https://codesandbox.io/s/vigorous-joana-82qcc?file=/src/App.js:69-1375

Note that this is an extracted code and the original one has a more complicated json data that I'm manipulating. And I got stuck when changing the state of the newUser.

Answer 1

Try changing handleClick to:

const handleClick = () => {
  updatedUsers = users.map((user) => ({ firstName: user.nom, lastName: user.prenom }))
  setNewUsersList([...newUsersList,...updatedUsers]);
};

Two notes: First, never change a state directly, but always use its setter. Second, it doesn't seems like you need newUser state at all