Lo que estoy tratando de hacer es: después de manipular los datos de cada usuario en la matriz de "usuarios", quiero agregarlo a un estado llamado newUser, luego empujar ese nuevo usuario a una matriz llamada newUsersList. ¿Cómo puedo hacer eso? (la matriz de usuarios aquí está simplificada)

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

El problema aquí es que la función setNewUser no funciona y, como puede ver, probé 3 soluciones:

1. ejecutando newUsersList.push(newUser) después de ejecutar setNewUser
2. agregó newUsersList.push (newUser) como un segundo parámetro para setNewUser
3. llamado newUsersList.push(newUser) dentro de useEffect cuando cambia el estado de newUser

Ninguna de estas soluciones está funcionando.

Código ejecutable: https://codesandbox.io/s/vigorous-joana-82qcc?file=/src/App.js:69-1375

Tenga en cuenta que este es un código extraído y el original tiene datos json más complicados que estoy manipulando. Y me quedé atascado al cambiar el estado del newUser.