const [searchText, setSearchText] = useState('')
const searchHandler = async (searchTextInput) => {
console.log('search is:::', searchTextInput)
setSearchText(() => searchTextInput)
}
const searchOnSubmitHandler = async () => {
await loadShopsCount()
await loadShops()
}
const searchClearHandler = async () => {
setSearchText(() => "")
console.log('onClear-----------search is:::', searchText)
await loadShopsCount()
}
On calling searchClearHandler after searching for something, searchText returns the previous state value instead of empty string. Hence, my component is not able to re-render.
How can I set searchText to empty string and re-render the component on calling searchClearHandler?
Use useEffect.
useEffect(() => {
Here your function which you want to call.
}, [searchText]);