How to return to original state in ReactJs when not data found

June 19, 2022

I’m currently fetching data from my db but for the simplicity of this Q, I have decided to manually create an example with fake data.

I’m building a search-bar for my users to look through all of the data coming from db and everything seems to be working fine when looking for a specific document, however, I want to reset the state to its original data when the input is empty.

This is what I’ve tried so far but with no success. Am I missing something?

const objects = [
  {
    _id: 0,
    title: 'Title One',
  },
  {
    _id: 1,
    title: 'Title Two',
  },
  {
    _id: 2,
    title: 'Title Three',
  },
]

const [keyword, setKeyword] = useState('')
const [list, setList] = useState([]);

useEffect(() => {
    setList(objects);
}, [objects]);

const handleChange = () => (e) => {
  e.preventDefault()
  setKeyword(e.target.value)

  if (keyword !== '') {
    const result = objects.filter((object) => {
      return object.title.toLowerCase().startsWith(keyword.toLowerCase())
    })
    setList(result)
  } else {
    // THIS IS WHERE THE PROBLEM RESIDES...
    console.log('Original data')
    setList(objects)
  }
}

This is the current output:

>Solution :

What you’re doing wrong is in these lines

setKeyword(e.target.value)

if (keyword !== '') {

The state is updated asynchronously, and the value of the keyword will be old.

What you can do is update the state in handleChange and then have a separate useEffect to update the results:

const [keyword, setKeyword] = useState('')
const [list, setList] = useState([]);

useEffect(() => {
    setList(objects);
}, [objects]);

useEffect(() => {
  if (keyword !== '') {
    const result = objects.filter((object) => {
      return object.title.toLowerCase().startsWith(keyword.toLowerCase())
    })
    setList(result)
  } else {
    // THIS IS WHERE THE PROBLEM RESIDES...
    console.log('Original data')
    setList(objects)
  }
}, [keyword]);

const handleChange = () => (e) => {
  e.preventDefault()
  setKeyword(e.target.value)
}