Construir un buscador funcional en React requiere conectar el input con el estado global y aplicar lógica de filtrado sobre los productos que vienen de una API. Aprenderás a filtrar productos por título usando filter, toLowerCase e includes, y a renderizar vistas condicionales según lo que escriba el usuario.

¿Cómo separar los items originales de los items filtrados en el estado global?

La primera decisión de arquitectura es no sobrescribir los productos originales que llegan de la API. Si pisas ese array, pierdes la fuente de datos.

La solución es duplicar el estado: mantienes items con todos los productos y creas un nuevo estado llamado filteredItems que guardará únicamente los resultados de la búsqueda [01:05]. Así el setter setFilteredItems actualiza solo la lista visible cuando el usuario escribe en el input, sin tocar la data original.

¿Por qué necesito dos estados separados para el buscador? Porque items guarda todos los productos de la API y filteredItems guarda solo los que coinciden con la búsqueda. Si usas uno solo, pierdes la lista completa al filtrar.

¿Cómo filtrar productos por título con filter, toLowerCase e includes?

La función de filtrado recibe dos parámetros: el array de items y el texto del input, llamado searchByTitle [02:10]. Dentro, se usa el método filter para evaluar cada producto y devolver solo los que coincidan.

La clave está en normalizar ambos strings con toLowerCase antes de comparar. Esto garantiza que la búsqueda funcione sin importar si el usuario escribe en mayúsculas o minúsculas. Después, includes verifica si el título del producto contiene el texto buscado.

Los pasos concretos del filtrado son:

• Recibir items y searchByTitle como parámetros de la función.
• Aplicar .filter() sobre el array de items.
• Convertir item.title a minúsculas con .toLowerCase().
• Convertir también searchByTitle a minúsculas.
• Usar .includes() para comparar coincidencias parciales.

Extraer esta lógica a una función llamada filteredItemsByTitle mantiene el código limpio y evita líneas demasiado largas dentro del useEffect.

¿Cómo renderizar la vista condicional según la búsqueda del usuario?

El componente Home originalmente pintaba todas las cards desde context.items. Ahora necesita decidir qué mostrar según tres escenarios distintos.

La solución es crear una constante llamada renderView que evalúa el estado del input y los resultados [06:30]. Si no hay búsqueda activa, muestra el catálogo completo. Si hay búsqueda con coincidencias, muestra los productos filtrados. Si hay búsqueda sin resultados, muestra un mensaje amigable.

¿Qué condiciones debe evaluar renderView?

La lógica condicional sigue este orden:

1. Si searchByTitle existe y su length es mayor a cero, evalúa los resultados filtrados.
2. Si filteredItems.length es mayor a cero, renderiza esas cards.
3. Si no hay coincidencias, retorna un mensaje como We don't have anything :(.
4. Si no hay búsqueda activa, retorna el listado original de items.

¿Qué pasa si el usuario busca algo que no existe? El componente debe retornar un mensaje claro como "no hay coincidencias" en lugar de dejar la pantalla en blanco. Una pantalla vacía rompe la experiencia del usuario.

¿Por qué exportar filteredItems desde el contexto es obligatorio?

Un error frecuente es crear el estado filteredItems dentro del Provider pero olvidar incluirlo en el value que se expone al resto de la app [10:15]. Sin esa exportación, el componente Home nunca recibe la data filtrada y la búsqueda parece rota aunque la lógica esté correcta. Revisa siempre que el nuevo estado quede listado junto a los demás valores del contexto.

¿Cómo conectar el useEffect con el filtrado dinámico?

El useEffect observa cambios en items y searchByTitle. Cuando el usuario escribe, se ejecuta la función de filtrado y el resultado se guarda con setFilteredItems [04:20].

Dentro del useEffect se valida que searchByTitle exista antes de ejecutar el filtro, porque no siempre habrá búsqueda activa. El usuario puede entrar a Home sin escribir nada, y en ese caso el catálogo completo debe mostrarse normalmente.

El flujo completo queda así:

• El input captura el texto y actualiza searchByTitle en el contexto.
• El useEffect detecta el cambio y ejecuta filteredItemsByTitle.
• setFilteredItems guarda los resultados en el estado global.
• Home lee filteredItems desde el contexto y los renderiza.

Probar el buscador con palabras como License o rustic confirma que el filtrado por título funciona correctamente, mientras que un texto sin coincidencias activa el mensaje de error controlado.

El reto: filtrar productos por categoría

Ahora viene tu turno. Aplica la misma lógica que usaste para filtrar por título, pero esta vez por categoría. La idea es que al hacer clic en clothes veas solo prendas, y al elegir electronics aparezcan únicamente productos electrónicos.

¿Te animas a resolverlo antes de la siguiente clase? Cuéntame en los comentarios cómo estructuraste tu solución.