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 :
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.
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