Filtrando categorías con JavaScript

¿Cómo filtrar productos por categoría en React?

Conectar a los usuarios con los productos que buscan fácilmente es un desafío común en el desarrollo web. En esta oportunidad, aprenderemos a implementar un filtro por categoría en una aplicación React, mejorando así la experiencia del usuario al permitirle encontrar más rápidamente lo que necesita. ¡Empecemos!

¿Cómo configurar el filtrado inicial en NavBar?

Para filtrar por categoría, el primer paso es escuchar el evento de clic en el NavBar. Necesitamos que, al hacer clic en una categoría determinada, se capture y guarde correctamente esta selección para proceder con el filtrado correspondiente.

1. En el componente NavBar, añadimos un evento onClick para cada categoría.
2. Al hacer clic, ejecutamos una función que actualiza el estado del contexto con el nombre de la categoría seleccionada.

Por ejemplo, para la categoría "clothes":

onClick={() => setSearchByCategory('clothes')}

¿Cómo implementar el estado para manejo de categorías?

Una vez que tenemos el mecanismo para capturar la categoría seleccionada, debemos integrar esta funcionalidad con el estado de la aplicación, de modo que se refleje en el filtrado de productos.

• Definimos un nuevo estado en el contexto para manejar searchByCategory.
• Esto implica exportar y usar setSearchByCategory en los componentes que necesiten actualizar o leer este estado.

const [searchByCategory, setSearchByCategory] = useState(null);

¿Cómo filtrar productos por categoría?

El siguiente paso es utilizar el estado searchByCategory para hacer efectivo el filtrado de productos.

1. Definimos una función que filtra los elementos considerando el estado de searchByCategory.
2. Si el estado tiene un valor, se filtran los productos con base en su categoría.
3. Si no hay ninguna búsqueda activa, se muestran todos los productos.

const filteredItems = items.filter(item => item.category.name === searchByCategory);

¿Cómo combinar el filtrado por título y categoría?

Para añadir una funcionalidad más sofisticada, se combinan las búsquedas por título y por categoría, permitiendo que los usuarios especifiquen tanto el tipo de producto como el nombre o características específicas.

• Implementamos una función filterBy que define cómo combinar ambos criterios de búsqueda.
• Utilizamos condiciones para ejecutar el filtrado correcto, dependiendo de si el usuario busca por título, categoría, ambos, o ninguno.

const filterBy = (searchType, items, searchByTitle, searchByCategory) => {
  if (searchType === 'by title' && searchByTitle) {
    return items.filter(item => item.title.includes(searchByTitle));
  }
  if (searchType === 'by category' && searchByCategory) {
    return items.filter(item => item.category.name === searchByCategory);
  }
  if (searchType === 'by title and category' && searchByTitle && searchByCategory) {
    return items.filter(item => 
      item.category.name === searchByCategory && 
      item.title.includes(searchByTitle)
    );
  }
  return items;
};

¿Qué hacer ante problemas comunes en el filtrado?

Puede suceder que al implementar el filtrado, enfrentemos errores. Un error común es intentar aplicar métodos de cadenas a objetos. Asegúrate de apuntar correctamente a las propiedades de los objetos, como category.name.

Solución de problemas:

1. Revisa la consola del navegador para mensajes de error.
2. Utiliza console.log para verificar los valores de variables en puntos críticos del código.
3. Ajusta tu lógica a partir de los datos que efectivamente estás obteniendo.

console.log(items);
console.log(filteredItems);

Filtrar productos por categoría mejora significativamente la experiencia del usuario. Aplicando estos pasos, estarás un paso más cerca de ofrecer una interfaz dinámica y funcional. Si tienes más ideas sobre cómo mejorar este filtrado, ¡compártelas! Y recuerda, ¡el aprendizaje nunca se detiene!