Filtrando títulos con JavaScript

¿Cómo implementar un buscador de productos por título en React?

El desarrollo de un buscador eficiente es fundamental para mejorar la experiencia del usuario en una aplicación. Aquí te explico cómo puedes implementar un buscador que filtra productos por título, usando React. Partimos de un estado inicial donde tenemos todos los productos visibles, pero ahora queremos que se muestren solo los que cumplan con el criterio de búsqueda que el usuario introduzca.

¿Cómo se definen los estados y la función de filtrado en React?

Para empezar, trabajamos con dos estados esenciales: Items, que contiene todos los productos y filteredItems, que almacenará los productos que coinciden con el texto de búsqueda. La función filteredItemsByTitle se encarga del proceso de filtrado.

const filteredItemsByTitle = (items, searchByTitle) => {
  return items.filter(item => 
    item.title.toLowerCase().includes(searchByTitle.toLowerCase())
  );
};

Este código aplica un filtro a los items, usando item.title.toLowerCase().includes(searchByTitle.toLowerCase()) para asegurar que la búsqueda no sea sensible a mayúsculas y minúsculas.

¿Cómo se integra el filtrado con el estado en React?

El siguiente paso es almacenar estos productos filtrados en el estado correspondiente, utilizando useEffect para reactualizar los filteredItems cada vez que el usuario introduce un texto de búsqueda.

useEffect(() => {
  if (searchByTitle) {
    setFilteredItems(filteredItemsByTitle(items, searchByTitle));
  }
}, [items, searchByTitle]);

Este código se activa cada vez que items o searchByTitle cambian, permitiendo que setFilteredItems actualice los elementos gobernados por el input del usuario.

¿Cómo renderizar la vista basada en el estado de búsqueda?

Finalmente, es clave determinar qué mostrar al usuario. Implementamos un renderizado condicional que decide si mostrar todos los productos o solo aquellos que coinciden con la búsqueda.

const renderView = () => {
  if (searchByTitle && filteredItems.length > 0) {
    return filteredItems.map(item => <Item key={item.id} item={item} />);
  } else if (searchByTitle && filteredItems.length === 0) {
    return <div>No hay coincidencias ☹️</div>;
  }
  return items.map(item => <Item key={item.id} item={item} />);
};

Este fragmento se asegura de que cuando no hay resultados, se notifique adecuadamente al usuario con un mensaje claro, mientras que en otros casos, los items adecuados se muestran.

¿Qué retos puedes enfrentar al implementar este buscador?

¡Increíble trabajo hasta aquí! Ahora, te invito a un desafío: intenta implementar un filtrado adicional por categoría. De esta manera, podrías ampliar la funcionalidad para permitir que el usuario busque productos dentro de categorías específicas, como "clothes" o "electronics".

Implementar este tipo de filtros requiere de un entendimiento sólido de React y de las buenas prácticas en la gestión del estado y el renderizado condicional. Siguiendo estos pasos, favorecerás una experiencia de usuario más robusta y dinámica. ¡Sigue adelante, estás construyendo habilidades valiosas en desarrollo frontend!