score:7

Accepted answer

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.

score:-1

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>

score: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);

score:0

const [persons, setPersons] = useState([
 { name: "qwerty", id: 1, number: 12345 },
 { name: "abc", id: 2, number: 1234567 },
 { name: "def", id: 3, number: 12345890 }   
]);

How to filter Names entered in input field when there is Array of Objects?

score:2

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.


Related Query

More Query from same tag