I'm learning react and trying to build an triomphe card game,

In this game i have a section where i can create the deck of cards and a section where i can filter a card by name.

i'm triyng to make a interactively filter input that onchange calls a handleFilter function that get the value of the input and create a new array of filtered items.

First i use filter array method to filter the array of all cards and then i check if the name of cards includes the value from input.

Here's my function handleFilter:

    handleFilter({ target: { value } }) {
        const { cards } = this.state;

    this.setState({ cardFilter: value });

    const filterByName = cards.filter(({ cardName }) => (
      cardName.toLowerCase().includes(value.toLowerCase())));

    if (filterByName.length > 0) {
      this.setState({ filter: filterByName,
        found: true,
      });
    }
  }

I have a problem when my input not match with the name of any card in deck, in that situation i wish that no card is showed.

Instead, lets assume i have a card named pikachu and i search for pikaboo.

I still get pikachu in my array as both includes 'pika' and when i do the filter and includes name it will get true and add pikachu to the filtered list that will be rendered afterwards.