why filtering state array with react hooks doesn't work but filtering original array does

Question

Based on an input from a user I am filtering over an array. It doesn't work if I use the teams from the state, but if I use the original array it does filter correctly. Can anyone explain why this is happening? I am a bit stumped.

There is a codesandbox here for reference.

const teams_data = [
  "tottenham",
  "arsenal",
  "man utd",
  "liverpool",
  "chelsea",
  "west ham"
];

function App() {
  const [teams, setTeams] = React.useState(teams_data);
  const [search, setSearch] = React.useState("");

  return (
    <div className="App">
      <input
        onChange={e => {
          // if I filter on teams below it doesn't work as it should
          // but if I use teams_data (original array) it works
          const filteredTeams = teams_data.filter(team => {
             return team.toLowerCase().includes(e.target.value.toLowerCase());
          });
          setTeams(filteredTeams);
          setSearch(e.target.value);
        }}
        type="text"
        value={search}
      />
      {teams.map(team => (
        <p>{team}</p>
      ))}
    </div>
  );
}

Nappy · Accepted Answer · 2019-09-02 09:37:12Z

7

If you filter teams and then setTeams, you can only remove teams from the collection. When at the beginning your filter does not match anything, it already reduces your teams to an empty array. If you use teams_data on the other hand you always have all your teams available to the filter.

answered Sep 2, 2019 at 9:37

Nappy

3,04630 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Webber · Accepted Answer · 2019-09-02 09:39:48Z

3

This is because you save the filtered result as the new state. This means you only filter out results, but never add them back in.

The implementation that you have on codesandbox is a correct implementation, whereas filtering on teams is not. However what you potentially could do is filter the full array only when the length of your search box value becomes smaller. That way, filtering would become more light weight, when using big datasets or when querying the server for the results.

answered Sep 2, 2019 at 9:39

Webber

5,6604 gold badges38 silver badges47 bronze badges

Comments

Nikola Diklich · Accepted Answer · 2019-09-02 09:42:05Z

0

This line

setTeams(filteredTeams);

destroys your entire array at the first input.

Instead, you should make another array:

const [filteredTeams, setFilteredTeams] = React.useState(teams_data);
...
          const tempFilteredTeams = teams_data.filter(team => {
             return team.toLowerCase().includes(e.target.value.toLowerCase());
          });
          setFilteredTeams(tempFilteredTeams);

answered Sep 2, 2019 at 9:42

Nikola Diklich

5261 gold badge8 silver badges28 bronze badges

Comments

Medet Tleukabiluly · Accepted Answer · 2019-09-02 09:43:16Z

Just check if input has value

const teams_data = [
  "tottenham",
  "arsenal",
  "man utd",
  "liverpool",
  "chelsea",
  "west ham"
];

function App() {
  const [teams, setTeams] = React.useState(teams_data);
  const [search, setSearch] = React.useState("");

  return (
    <div className="App">
      <input
        onChange={e => {
          if (e.target.value) {
            const filteredTeams = teams.filter(team => {
              return team.toLowerCase().includes(e.target.value.toLowerCase());
            });
            setTeams(filteredTeams);
          } else {
            setTeams(teams_data);
          }
          setSearch(e.target.value);

        }}
        type="text"
        value={search}
      />
      {teams.map(team => (
        <p>{team}</p>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Collectives™ on Stack Overflow

why filtering state array with react hooks doesn't work but filtering original array does

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related