I updated my boolean States in child component, but it is still original value in parent component-CodePudding

This is my child component form submission handler

const formSubmitHandler = (evt) => {
    evt.preventDefault();
    const newUser = {
      name: username,
      age: Number(age),
    };
    if (newUser.name !== "" || newUser.age !== 0) {
      props.onCreateUser(newUser);
      evt.target[0].value = "";
      evt.target[1].value = "";
      return;
    }
    setIsValid(false);
    props.onIsValid(isValid);
  };

In this code, if there is no name input or no age input, i'm changing the isValid state to false. Then, i sent this state value to my parent component.

This is my parent component

import { useState } from "react";
import "./NewUser.css";
import UserForm from "./UserForm";

const UserResults = (props) => {
  const createUserHandler = (userData) => {
    const userObj = {
      ...userData,
      id: Math.random().toString(),
    };

    props.onGetUserData(userObj);
  };

  const isInvalidHandler = (bool) => {
    console.log(bool);
  };

  return (
    <div>
      <UserForm
        onCreateUser={createUserHandler}
        onIsValid={isInvalidHandler}
      ></UserForm>
    </div>
  );
};

export default UserResults;

But when i execute console.log(bool), the value is still 'true'. I really can't any flaw in my logic. Can you help me what is wrong in my component and Why my boolean state not changed?

CodePudding user response：

State updates are asynchronous. You either write inside useEffect() (which is like componentDidUpdate()) or directly call parent function with boolean value:

useEffect()

useEffect(() => { props.onIsValid(isValid); }, [isValid]);

calling parent function before

const formSubmitHandler = (evt) => {
    evt.preventDefault();
    const newUser = {
      name: username,
      age: Number(age),
    };
    if (newUser.name !== "" || newUser.age !== 0) {
      props.onCreateUser(newUser);
      evt.target[0].value = "";
      evt.target[1].value = "";
      return;
    }
    props.onIsValid(false);
    setIsValid(false);
  };

CodePudding user response：

That's because the state isn't updated yet and you are sending the old value. I suggest creating a useEffect() witch triggers whenever 'isValid' changes and executes props.onIsValid(isValid) in its body.

EXAMPLE:

   useEffect(() => {
      props.onIsValid(isValid)
    }, [isValid])