La idea clave
El método filter crea una lista nueva con los elementos que cumplen una condición. Por ejemplo, productos.filter(nombre => nombre.includes("Cuaderno")) conserva solo los nombres que incluyen «Cuaderno». El catálogo utiliza este resultado para mostrar coincidencias y explicar cuando no hay ninguna.
Ejemplo paso a paso
Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.
Primera pieza del proyecto
const productos = ['Libro', 'Cuaderno', 'Lápiz'];
const resultados = productos.filter(nombre => nombre.includes('Libro'));
console.log(resultados);- productos contiene todos los nombres.
- filter conserva solo los que incluyen el texto buscado.
- El catálogo real conecta el filtro con un campo y muestra un estado vacío cuando no encuentra nada.
Practica con código
Antes de empezar, piensa: ¿Cuántos productos mostrará el ejemplo inicial?
Abre el catálogo, busca «cuaderno» y observa qué objetos conserva filter. Luego busca algo inexistente y comprueba el estado vacío.
El resultado que buscamos
La búsqueda reduce los resultados; para la palabra inexistente aparece un estado vacío claro.