I want to make a table for user email lists. but when I create new email(click add user btn), users
state doesn’t update. could you help me to fix this issue? thank you
import React, {useState} from 'react';
const Admin: NextPage = () => {
const [users, setUsers] = useState([
{ email: "[email protected]" },
{ email: "[email protected]"},
]);
const [email, setEmail] = useState('');
const removeUser = rowEmail => {
const updatedArray = users.filter((row) => row.email !== rowEmail);
setUsers(updatedArray);
}
const addUser = () => {
console.log(email);
const lists = users;
lists.push({'email' : email});
setUsers(lists);
}
return (
<>
<div className="user-user">
<input type="email" onChange={event => setEmail(event.target.value)} />
<span onClick={() => addUser()}>Add User</span>
</div>
<div className="user-list">
<table>
<thead>
<tr>
<th>Users</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{users.map((val, key) => {
return (
<tr key={key}>
<td>{val.email}</td>
<td><span onClick={() => removeUser(val.email)}>Remove</span></td>
</tr>
)
})}
</tbody>
</table>
</div>
</>
);
}
export default Admin;