Estoy aprendiendo a reaccionar y tratando de construir un juego de cartas de triunfo,

En este juego tengo una sección donde puedo crear el mazo de cartas y una sección donde puedo filtrar una carta por nombre.

Estoy tratando de hacer una entrada de filtro interactiva que al cambiar llama a una función handleFilter que obtiene el valor de la entrada y crea una nueva matriz de elementos filtrados.

Primero utilizo el método de matriz de filtro para filtrar la matriz de todas las tarjetas y luego verifico si el nombre de las tarjetas incluye el valor de la entrada.

Aquí está mi función 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, }); } }

Tengo un problema cuando mi entrada no coincide con el nombre de ninguna carta en el mazo, en esa situación deseo que no se muestre ninguna carta.

En cambio, supongamos que tengo una tarjeta llamada pikachu y busco pikaboo.

Todavía obtengo pikachu en mi matriz, ya que ambos incluyen 'pika' y cuando hago el filtro e incluyo el nombre, se volverá verdadero y agregará pikachu a la lista filtrada que se procesará después.