Getting input text values on Rect using onChange misses first letter when typing and when deleting it misses too

Question

I have a small text field to filter a object array on my React app but when I type the onChange event skips the first character so it's not filtering the array correctly then when I delete the text it does not delete the first letter I wrote so to remove the filter you must reload the page.

This is my app:

    function App() {

  const [memes, setMemes] = useState([]);
  const [filteredMemes, setFilteredMemes] = useState([]);
  // const [filter, setFilter] = useState("");

  useEffect(() => {
    (async function getData() {
      await getMemes();
    })();
  }, []);

  const getMemes = async () => {
    const results = await memeService.getMemes();
    setMemes(results.data.data.memes);
    setFilteredMemes(memes);
  }

  const handleSearch = (event) => {
    
    const filter = event.target.value;

    setFilteredMemes(memes);

    filteredMemes.filter((meme) => meme.name.toUpperCase().search(filter.toUpperCase()) >= 0);

  }

  return (
    <>
      <Nav handleSearch={handleSearch} />
      <Router>
        <Switch>
          <Route path="/:id/edit" children={<Editor />} />
          <Route path="/:id/new" children={<New />} />
          <Route path="/">
            <div className='container'>
              {filteredMemes.map(meme => <Meme key={meme.id} meme={meme} />)}
            </div>
          </Route>
        </Switch>
        
      </Router>
      
    </>
  )
}

export default App;

This is the Nav component that contains the input:

import './Nav.css';

const Nav = ({handleSearch}) => {

    return (
        <div className='nav'>
            <input type='text' placeholder='Search' onChange={handleSearch} />
            <a href='/'>Home</a>
        </div>
    )
}

export default Nav;

When I check on console the values that I'm gettin on the handleSearch function always gets the first letter as white space therefore when you erase the filter the results are no set to the full array.

You don't need to keep `filter` in the state, remove that and use `const filter=event.target.value` in the handler instead — Nadia Chibrikova, Feb 22 '21 at 16:56
Yes it works without using the Sate but now when I delete the search the results dont update :( — jcobo1, Feb 22 '21 at 17:05
Yes the filtre variable changes it’s values but the results array doesn’t — jcobo1, Feb 22 '21 at 17:19
Wait, you replace the original `memes` with filtered , so you can never get the filtered out ones back. You need to keep an unfiltered list for the reference — Nadia Chibrikova, Feb 22 '21 at 17:19
Try reading this - https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately if it is too confusing, I can explain it simpler. But the way you're using state cannot work — Nadia Chibrikova, Feb 22 '21 at 17:33
I think I get it, but the useState can be called when changing a variable not state? — jcobo1, Feb 22 '21 at 17:36
the filtered state I know it can work but tryed almost everything — jcobo1, Feb 22 '21 at 17:36

score 0 · Accepted Answer · answered Feb 22 '21 at 17:48

0

There are a couple of problems here.

setMemes(results.data.data.memes); //you request React to update memes at some point in the future 
  setFilteredMemes(memes); // you set filteredMemes to memes, which is still [] at this point

 setFilteredMemes(memes); // you request to change filteredMemes to the unfiltered version (again at some later point)

 filteredMemes.filter((meme) => meme.name.toUpperCase().search(filter.toUpperCase()) >= 0); //filter creates a new array, not assigned to anything

Should be

  setMemes(results.data.data.memes); 
  setFilteredMemes(results.data.data.memes); 

  setFilteredMemes(memes.filter((meme) => meme.name.toUpperCase().search(filter.toUpperCase()) >= 0));

answered Feb 22 '21 at 17:48

Nadia Chibrikova

4,916
1
15
17

ok I see it now why it wasnt working so frustating by the way is there any course that could help me to get a better understanding of React. Yesterday you had to cover me too. Thanks Nadia – jcobo1 Feb 22 '21 at 17:53
I almost feel responsible for your memes now! The official React tutorial is reasonably good https://reactjs.org/tutorial/tutorial.html – Nadia Chibrikova Feb 22 '21 at 17:55
I will give you 60% of the credit! It's a side project I started to learn React I usually use Angular with no problem but don't know why I get constantly stuck with React but will take a look to the link you shared me – jcobo1 Feb 22 '21 at 17:57

Getting input text values on Rect using onChange misses first letter when typing and when deleting it misses too

1 Answers1