react - text input give me null

Question

(in REACT)

i have app function :

function App() {
  const [welcomeMenu, setWelcomeMenu] = useState(true);
  const [gameMenu, setGameMenu] = useState(false);
  const [username, setUsername] = useState('');
  const welcomeMenuShow = () => {
    setWelcomeMenu(false);
  }
  const getUserName = (value) => {
    setUsername(value);
    console.log(username);
  };
  return (
    <div className="App">
      {
        welcomeMenu ? <WelcomeMenu gameStarter={welcomeMenuShow} getUserName={getUserName}/> : null
      }
    </div>
  );
}

in welcomemenu component i pass getUserName function to get username which user input 

next in Welcome menu i have : 
const WelcomeMenu = ({ gameStarter, getUserName }) => {
  return (
    <div className="welcome-menu">
      <WelcomeText />
      <WelcomeBoard gameStarter={gameStarter} getUserName={getUserName}/>
    </div>
  )
};

i pass get User Name in second time

in WelcomeBoard i have:

const WelcomeBoard = ({ gameStarter, getUserName }) => {
  const [text, setText] = useState('');
  const [warning, setWarning] = useState(false);
  const checkBtn = (event) => {
    if(text) {
      gameStarter();
    } else {
      setWarning(true);
      setTimeout(() => {
        setWarning(false);
      }, 3000);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className="welcome-board">
      <div className="username">Please enter the name</div>
      <input type="text" value={text} onChange={handleChange} className="username-input" />
      <button className="username-btn" onClick={() => {
        getUserName(text);
        checkBtn();
      }}>start</button>
      {warning ? <Warning /> : null}
    </div>
  )
};

in input onchange i make state and pass the input value on text state next on button i have on click which active 2 function: getUserName(text) // text is a state text with input value

checkBtn()

and after a click button in app i activate getUserName(text), this function pass the text in username state and here is a problem when i try to see this text console.log(username) - it's give me null but it if i try to see value console.log(value) - i see my input text

i don't understand how to fix that

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Brian Thompson, Mar 04 '22 at 15:12

score 0 · Answer 1 · answered Mar 04 '22 at 15:26

react setState is async, which means those state variables are updated in the NEXT RENDER CYCLE(think of it as a thread or buffer). try running this code if you want to understand what is happening BEHIND THE SCENES.

let renderCount = 0;

function TestApp() {
 renderCount++;
 const [state, setState] = useState(0);
 const someRef = useRef(0);
 someRef.current = state;
 const someCallback = () => {
   const someValue = new Date().getTime();
   setState(someValue);
   console.log(someRef.current, renderCount);
   setTimeout(() => {
     console.log(someRef.current, renderCount);
   },100)
 }

 return <button onClick={someCallback}>clickme<button>;
}

react - text input give me null

1 Answers1