在 React Hooks on Change 方法中更新 State

Question

I am wondering why React is not updating the state after a method onChange is called.

Summary: A simple input element with two float-right icons to display. One icon to display if the length of the input text is 0 while the other if the input text length > 0. But it seems React is updating the state after I enter the second text in my input element.

What I need is:

Display % if length == 0 and display X is length is > 0.

And if the length > 0 then user on click of X set the input text == "" OR input.length = 0.

Problem is: Though I am able to clear the input but the icon % is not displayed.

  const onChange = (e: any) => {
    //setting user input
    if (userInput.length > 0)
      setDisplayIcon({ default: "d-none", clear: "d-block" });
    else setDisplayIcon({ default: "d-block", clear: "d-none" });
  };

  const clearText = (e: any) => {
    setUserInput("");
  };

  return (
   
            <label id="default" className={`${displayIcons.default}`}>
              %
            </label>
            <label className={`${displayIcons.clear}`} onClick={clearText}>
              X
            </label>
  );
}

Answer 1

Add setting display icon state:

const clearText = (e: any) => {
    setUserInput("");
    setDisplayIcon({ default: "d-block", clear: "d-none" });
};

Answer 2

You will not be able to console.log the updated state value inside of the same function. Try placing your console.log outside of the function and you will see that it does in fact update.

"setState is asynchronous call means if synchronous call get called it may not get updated at right time like to know current value of object after update using setState it may not get give current updated value on console. To get some behavior of synchronous need to pass function instead of object to setState." - https://www.geeksforgeeks.org/reactjs-setstate/