0

Why, when the user enters data into the form for the first time, 'users' remains an empty array, as it was, and only after the second time button is pressed, the data is written to 'setUser?

import Card from "../UI/Card";
import Button from "../UI/Button";


const UserForm = (props) => {
  const [users, setUsers] = useState([]);
  const [data, setData] = useState({ username: "", age: "" });

  const submitHandler = (e) => {
    e.preventDefault();
    setUsers([...users, data]);
    console.log("2", users);
    props.getUsers(users);
  };

  return (
    <Card className={classes.container}>
      <div>Username</div>
      <input
        type="text"
        onChange={(e) => {
          setData({ ...data, username: e.target.value });
        }}
      ></input>
      <div>Age (Years)</div>
      <input
        type="number"
        onChange={(e) => setData({ ...data, age: e.target.value })}
      ></input>
      <Button onClick={submitHandler}>Add User</Button>
    </Card>
  );
};

export default UserForm;

....................

ludwiguer
  • 2,177
  • 2
  • 15
  • 21
Iqos11
  • 1
  • Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) – ludwiguer Jan 18 '23 at 17:19

1 Answers1

0

React State update takes time. So you need a useEffect hook with state as a argument in it. so whenever the state change, this hook triggers and perform your state related functions.

useEffect(() => {
  console.log(users)
  props.getUsers(users);
}, [users]);
bovop4
  • 224
  • 1
  • 9