I'm struggling with the search filter. Im trying to lift up my input state to app component. Navbar component with searchbar is rendered in App.

so:

        <input
        placeholder="Search..."
        type="text"
        onChange={searchHandler}
        value={inputText} />

const searchHandler = (e) => {
setInputText( e.target.value);
searchFilter(inputText) }

Then in App component console.log shows one char delay. How i can handle current state?

CodePudding user response：

in searchHandler function, you call searchFilter before your state is set. you have two options:

1)

const searchHandler = (e) => {
   searchFilter(e.target.value)
}

2. use useEffect:

         useEffect(() => {
            searchFilter(inputText)
         }, [inputText])
   
         const searchHandler = (e) => {
             setInputText(e.target.value);
         }