Filtrando categorías con JavaScript

Hola, mi solución es algo diferente :
En App hice estos cambios a las rutas:
…

const AppRoutes = ()=>{
  let routes = useRoutes([
    { path:'/', element:<Home /> },
    { path:'/:category', element:<Home /> },....'

y en Home tome el valor de la rutas y luego hice el filtrado:

function Home() {
  const context = useContext(ShoppingCardContext)
  const currentPath = window.location.pathname
  let index = capitalizarPrimeraLetra(currentPath.substring(currentPath.lastIndexOf('/')+1))
  console.log(context.items)
  const renderView = ()=>{
    if(context.searchByTitle?.length > 0){
      if(context.filterItems?.length > 0){
        if(index){
          return (
            context.filterItems?.filter(item => item.category.name === index).map((item)=>(
              <Card key={item.id} data = {item}/>
           ))
          )
        }else{
      return (
          context.filterItems?.map((item)=>(
            <Card key={item.id} data = {item}/>
         ))
        )}}else{
          return(
            <div>We don't have anything</div>
          )
        }'

espero que les sirva.

Pobre Estefany se ha pegado una enredada, les comparto una forma más sencilla
en el context:

 //products array
  const [item, setItem] = useState(null);
  //searched products array
  const [searchedItem, setSearchedItem] = useState(null);
  //filtered products array
  const [filteredItems, setFilteredItems] = useState(null);

 // filter products by name, description or category
  const filtered = (item, searchedItem) => {
    return item.filter(
      (item) =>
        item.name.toLowerCase().includes(searchedItem.toLowerCase()) ||
        item.description.toLowerCase().includes(searchedItem.toLowerCase()) ||
        item.category.name.toLowerCase().includes(searchedItem.toLowerCase())
    );
  };
  // filter products by name, description or category
  useEffect(() => {
    if (searchedItem) {
      setFilteredItems(filtered(item, searchedItem));
    } else {
      setFilteredItems(item);
    }
  }, [searchedItem, item]);

en el home:

 return (
    <Layout>
      <Tittle tittle="Find Your Favorite Products" />
      <SearchInput/>
      <div className="grid gap-4  grid-cols-2 sm:grid-cols-4 w-full max-w-screen-lg px-2 mt-4">
        {context.filteredItems?.length < 1 ? (
          context.item &&
          context.item.map((item) => <Card key={item.id} data={item} />)
        ) : context.filteredItems ? (
          context.filteredItems.map((item) => (
            <Card key={item.id} data={item} />
          ))
        ) : (
          <p className="text-center text-2xl">...Loading</p>
        )}
      </div>
      <ProductDetail />
      <CheckOutSideMenu />
    </Layout>

yo lo solucione de otra manera que me resulta un poco mejor

Primero en app agregue una ruta nueva llamada category que recive el parametro :category

{path: '/category/:category', element:<Home />},

despues ya desde clases anteriores use el hook useParams(), que vi que un compañero lo recomendo, investigue un poquito y me parecio mucho mejor que obtener la url y cortarla.

<Home />

const params = useParams()  

Luego cree un estado que guarda los items segun la categoria, donde su estado inicial es la lista completa de items.

seguido con un useEffect(), compruevo si cambio params.category, y si hay category devuelvo seteo el estado con la lista de items filtrada, si no hay parametros seteo la lista con la lista completa de items.

 const {        
        items,
    }= useContext(ShoppiCartContext)

    const[itemsByCategory, setItemsByCategory] = useState(items)

    useEffect(()=>{
       if(params.category){
           setItemsByCategory(items.filter((item)=> item.category.name.toLowerCase() === params.category.toLocaleLowerCase()))
       }else{
           setItemsByCategory(items)
       }
   },[params.category])

luego para que funcione correctamente la busqueda, tenemos dos estados el de serachValue de clases anteriores que contiene el texto del input, y agregue el estado filteredItems que ai guardo la lista de items filtrados por titulo.

Para que funcione correctamente tenemos un useEffect() que comprueba si cambio el params o el search value y setea el estado filteredItems con la nueva lista de items fltrados segun categoria y buscador.

const [searchValue, setSearchValue] = useState('')

    const [filteredItems , setFilteredItems] = useState(itemsByCategory)

    useEffect(()=>{
        setFilteredItems(itemsByCategory.filter((item)=> item.title.toLowerCase().includes(searchValue.toLowerCase())))
    },[searchValue, itemsByCategory])

Luego en el map dle return tomo como lista de referencia a filteredItems, que si la lista es menor a 1 devuelve un parrafo que dice que no hubo coincidencias, pero si la lsita contiene items devuelve los items.

 {filteredItems < 1
            ?<p className="text-center text-3xl col-span-3">ups no hay coincidencias con la busqueda!</p>
            :filteredItems?.map((item)=>(<Card key={item.id} item={item} />))}

Todo el codigo seria asi

import { useContext, useEffect, useState } from "react"
import { useParams } from "react-router-dom"
import { Card } from "../../components/Card"
import { ProductDetail } from "../../components/ProductDetail"
import { CheckOutSideMenu } from "../../components/CheckOutSideMenu"
import { ShoppiCartContext } from '../../Context'



function Home (){

    const params = useParams()  

    const {        
        items,
    }= useContext(ShoppiCartContext)

    const[itemsByCategory, setItemsByCategory] = useState(items)

    useEffect(()=>{
       if(params.category){
           setItemsByCategory(items.filter((item)=> item.category.name.toLowerCase() === params.category.toLocaleLowerCase()))
       }else{
           setItemsByCategory(items)
       }
   },[params.category])

    const [searchValue, setSearchValue] = useState('')

    const [filteredItems , setFilteredItems] = useState(itemsByCategory)

    useEffect(()=>{
        setFilteredItems(itemsByCategory.filter((item)=> item.title.toLowerCase().includes(searchValue.toLowerCase())))
    },[searchValue, itemsByCategory])

return(
<section className="flex flex-col items-center justify-center gap-4">
    <input 
        type="search" 
        placeholder="buscar el producto ideal" 
        className=" w-1/2 h-8 border rounded-lg px-2 focus:outline-none"
        onChange={(e)=>setSearchValue(e.target.value)}
        />
    <section className="flex gap-1 px-2">
        <section className="  grid grid-cols-3 gap-2 w-full max-w-screen-lg">
            {filteredItems < 1
            ?<p className="text-center text-3xl col-span-3">ups no hay coincidencias con la busqueda!</p>
            :filteredItems?.map((item)=>(<Card key={item.id} item={item} />))}
        </section>
        <ProductDetail />
        <CheckOutSideMenu />
    </section>
</section>
)
}

export {Home}

Yo quería filtrar con la misma API, ya que hay una sección Filter by category pero cuando hago fetch, actualmente la API siempre regresa resultados diferentes 😕 creo que deberían controlar y organizar la BBDD

a mi me daba esta alerta al tratar de usar la funcion

la manera de solucionarlos es con esta liniea comentada

// eslint-disable-next-line react-hooks/exhaustive-deps

Antes de ver la clase lo hice de una forma diferente.
.
Me parece que es más simple de la siguiente manera.
.
En primer lugar, me parece más escalable no fijar las categorias de antemano, sino que obtenerlas de los propios productos, porque así cuando se agreguen nuevas categorias de productos, tu no tendrás que ir a crear una nueva ruta.
.
Entonces para eso lo que hice fue lo siguiente:
.

 const categoriesSet = new Set(products.map(product => product.category.name));
    const categories = Array.from(categoriesSet);

Esas dos lineas do codigo lo que hacen es generar un array donde estarán todos los nombres de las categorias, cada elemento del array es un string. Si te preguntas por qué está un “new Set” y que carajos es eso, en este caso nos sirve para que no se repitan los nombres de las categorias, sino que lo obtengamos una unica vez.
.
.
Luego en mi componente NavBar consumo ese array de categorias que lo definí en mi contexto e itero ese array para generar la información de los links de las categorias.
.

// Get the categories name from the context
    const categories = context.categories

    // Create an array of objects with the categories name.
    // That array held the data for the left side of the navbar links.
    const navLinksLeft = categories.map((category) => {
        return { to: `/${category}`, text: category }
    })

.
En mi pagina de app.jsx creé un parametro dinamico para las categorias. Esto en la ruta /
.

  let routes = useRoutes([
    { path: '/', element: <Home /> },
    { path: '/:category', element: <Home /> }, 

.
Y ahora, yendonos al home, a través del hook useParams consumo en qué categoria estamos, eso devuelve un string. PERO, si estás en el home donde están todos los productos, no hay ninguna categoria, por lo tanto el useParams te devuelve un undefined. Y si si estás en una categoria, te devuelve un string, string que usarás para filtrar los productos de solo esa categoria
.

 const { category } = useParams()

  const productsToRender = () => {
      if(!category) {
        return context.filteredProducts
    } else {
      const productsByCategory = context.filteredProducts.filter(product => product.category.name === category)
        return productsByCategory
    } 
  }

.
Dentro de la funcion “productsToRender” dependiendo si la categoria está definida o no, te devuelve una cosa u otra. Si la categoria está definida usas ese string para filtrar el array de todos los productos y obtienes solo los productos de esa categoria en especifica y los retornas.
.
Luego, por ultimo, en la interfaz llamas a la funcion “productsToRender” y ualá, listo. Ya tienes los productos filtrados.
.

<div className={`${marginRightClass} grid grid-cols-4 gap- w-full max-w-screen-lg`}>
          {productsToRender()?.map((product) => (
            <Card key={product.id} product={product} />
            ))}
        </div>

.
(contenido no patrocinado por ualá)

Mi solución fue trabajar con rutas dinámicas, en el componente app escribí lo siguiente:

const AppRoutes = () => {
  const routes = useRoutes([
    { path: "/", element: <Home /> },
    { path: "/:category", element: <Home /> },
...

Luego desde el componente Home, definí un estado category y capturé el valor del pathname y escribí la función filterByCategory que se encarga de filtrar los productos.

// Home/index.jsx
...
const [category, setCategory] = useState(null);
  
  useEffect(() => {
    setCategory(window.location.pathname.slice(1));
  },[window.location.pathname]);

  const filterByCategory = (products, category) => {
    if(category){
      return products.filter(product => product.category.name.toLowerCase() === category);
    } else {
      return products;
    }
  }

Mi solucion:

function Home() {
  const context = useContext(ShoppingCartContext);
  const { category } = useParams();

  const renderView = () => {
    if (category !== undefined) {

      const filtered = context.items.filter((item) =>
        item.category.name.toLowerCase().includes(category.toLowerCase())
      );

      if (filtered.length){
        return filtered.map((item) => <Card key={item.id} {...item} />);
      }else{
        return <div>There are nothing to see :(</div>
      }

      

    } else {
      return context.filtereditems?.map((item) => <Card key={item.id} {...item} />);
    }
  };

  return (
    <div>
      <div className="flex items-center justify-center relative w-80 mb-4">
        <h1 className="font-medium text-xl">Exclusive Products</h1>
      </div>
      <input
        type="text"
        placeholder="Search a product"
        className="rounded-lg border border-black w-80 p-4 mb-4 focus:outline-none"
        onChange={(event) => context.setSearchByTitle(event.target.value)}
      />
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
        {renderView()}
        <ProductDetail />
      </div>
    </div>
  );
}

export default Home;

noto algo curioso el filtrado ocurre si y solo si tiene caracteres el search de lo contrario muetra todas a pesar de tener categorias

.
.
.
En mi solucion no utilice el contexto mas que para obtener mis item (contex.items)
Dentro de mi componente <Home /> utilizo dos props
el campo por el cual se va a filtrar y el valor que se busca

.
.
.

en Home utilizo dos estados locales uno para controlar el cambio cambio del value del input y el otro para guardar los items filtrados y no alterar el arreglo original de items

.
.
.
ademas tengo utilizo un componente aparte para el search

.
.
.
mi funcion de filtrado filterItems() recibe un array, el campo por que se filtra y el valor que se busca

Hola, estoy haciendolo en Nextjs, y me sucede algo que tambien le sucede al proyecto de la clase, el problema de usarlo con un onClick, esque si recargamos desde la url con la ruta /clothes o las que tenemos nos sale un error, o no nos sale, alguien sabe como hacer para que no pase, digamos que en Nextjs 13 o acá, cuando se recargue la página siempre lo lleve a la ruta raiz “/”? Gracias

Hola comunidad de Platzi!!!
.
Espero se encuentren muy bien todos, les comparto mi solución:
Para esta clase lo que hice fue crear un estado que se llame renderItems y ademas
cree también dos funciones una para filtrar y otra para buscar.
.
En cada una de las funciones lo que hago es recibir como parametro un array de items,
luego con un if pregunto en el caso de la funcion para filtrar, si existen filtros y
dependiendo de ello devuelvo el mismo array o aplico los filtros. Esto mismo
hago con la funcion de buscar, dependiendo de si hay algo en el buscador devuelvo los
items buscados y si no entonces devuelvo los mismos items del argumento.
.
Por último en la parte del hook, ejecuto una función tras otra y al ultimo seteo los
items en el hook creado de renderItems. A mi parecer es más ordenado, entendible y
fácil de reutilizar. Pero estoy abierto a criticas constructivas !!!.
.
Si tienen algo que aportar se los agradeceria mucho, que tengan un excelente día de
code!

yo  hize un componente que se llama categoria y segun el path name me renderiza la categoría, pude hacerlo sin ifs pero me gusto hacerlo asi, por si acaso

import { useContext } from 'react';
import { ContextApi } from '../../Components/ContextApi';
import { Layout } from '../../Components/Layout';
import { Card } from '../../Components/Card';

const Categories = () => {
  
  const context = useContext(ContextApi);

  const currentPath = window.location.pathname.substring(window.location.pathname.lastIndexOf('/')+1); 

  let filtercategory;

  if(currentPath === 'clothes'){
    
    filtercategory = context.data.filter(item =>{
      return item.category.name.toLowerCase() === currentPath;
    });

  }else if(currentPath === 'electronics'){
    
    filtercategory = context.data.filter(item =>{
      return item.category.name.toLowerCase() === currentPath;
    });

  }else if(currentPath === 'furniture'){
    
    filtercategory = context.data.filter(item =>{
      return item.category.name.toLowerCase() === currentPath;
    });

  }else if(currentPath === 'shoes'){
    
    filtercategory = context.data.filter(item =>{
      return item.category.name.toLowerCase() === currentPath;
    });

  }else if(currentPath === 'shoes'){
    
    filtercategory = context.data.filter(item =>{
      return item.category.name.toLowerCase() === currentPath;
    });

  }else if(currentPath === 'others'){
    
    filtercategory = context.data.filter(item =>{
      return item.category.name.toLowerCase() === currentPath;
    });

  }

return (
  <Layout>
    <h1 >CATEGORY OF {currentPath.toUpperCase()}</h1>
    <div className='grid  xs:grid-cols-1 ss:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 pt-4'>
      {
        filtercategory.map((item, index )=>{
          return (<Card categoryItem={item.category.name} idItem={item.id} descItem={item.description} imgItem={item.images} priceItem={item.price} titleItem={item.title} key={index}/>)
        })
      }
    </div>

  </Layout>
);
}

export {Categories};

Yo lo hice de esta forma donde siempre renderizamos filterProducts en Home, pero dependendiendo de la categoria en la que estemos, cambiara el searchByCategory y asi devolveremos algunos productos u otros y si la categoria es “all” devolvemos todos los productos

    const filterProducts = products.filter(product => {
        const productoName = product.title.toLowerCase()
        const productCategory = product.category.toLowerCase()
        const filterName = searchByTitle.toLowerCase()
        const filterCategory = searchByCategory.toLowerCase()

        if(productoName.includes(filterName) && filterCategory === "all") {
            return product
        } else if(productoName.includes(filterName) && productCategory === filterCategory) {
            return product

        }
    })

No sé si sea buena idea usar dos useEffects para llamar dos api, estoy usando una api diferente a la de platzi (básicamente llamo la misma pero con diferente endpoint)

La idea fue llamar la cantidad de categorias que hay automaticamente y llamarlas al navbar, adicional a ello hacer los filtros por categoria:

Use Effect

Llamando las categorias

Metodos de filtrados que los mejoré con esta clase:

Home, el renderview donde llamo las tarjetas filtradas:

Acá me gustaría compartir un ajuste para Navbar, pues voy viendo que hay categorías que no tienen datos y en los datos de la api hay categorías que no estamos alcanzando, entonces hice un navbar dinámico para las categorías:

const Navbar: FC = () => {
  const { count, items } = useContext(ShoppingCartContext);

  const getNavBarCategories = () => {
    const filteredCategories = [
      ...new Map(items.map((item) => [item.category.name, item])).values(),
    ];
    return filteredCategories.map((category) => (
      <li>
        <NavLinkStyled to={`/${category.category.name}`}>
          {category.category.name}
        </NavLinkStyled>
      </li>
    ));
  };

  return (
    <nav className="flex justify-between items-center fixed z-10 top-0 w-full py-5 px-8 text-sm font-light">
      <ul className="flex items-center gap-3">
        <li className="font-semibold text-lg">
          <NavLinkStyled isLogo to="/">
            Shopi
          </NavLinkStyled>
        </li>
        <li>
          <NavLinkStyled to="/">All</NavLinkStyled>
        </li>
        {getNavBarCategories()}
      </ul>
      <ul className="flex items-center gap-3">
        <li className="text-black/60">[email protected]</li>
        <li>
          <NavLinkStyled to="/my-orders">My Orders</NavLinkStyled>
        </li>
        <li>
          <NavLinkStyled to="/my-account">My Account</NavLinkStyled>
        </li>
        <li>
          <NavLinkStyled to="/sign-in">Sign In</NavLinkStyled>
        </li>
        <li className="flex items-center justify-center">
          <ShoppingCartIcon className="h-6 w-6 text-green-500" />
          <div>{count}</div>
        </li>
      </ul>
    </nav>
  );
};

Acá lo importante es el getNavBarCategories

Adicional para que esto funcione, en las rutas no cree manualmente cada ruta, solo le pase en el path que iba a recibir un parámetro:

 {
      path: "/:category",
      element: <Home />,
    },

Y con eso ya en Home recupero el dato con useParams(), filtro y vualá

Hola, es importante decir que react-router-dom es capaz de recordar la página donde estabamos si se recarga el navegador, pero si se guarda la última categoría en el estado al recargar la página se pierde esa información. Una forma de solucionar es usar localStorage.setItem, guardar ahí la última categoría cuando se haga click y luego en el contexto podemos crear una función que consulte a localStorage.
Luego el siguiente paso clave es lo siguiente, y por eso lo importante de este aporte, puedes iniciar tu estados con una función. Por ejemplo:

const getLastCategory = () => {
  const lastCategory = localStorage.getItem("lastCategory");
  return !lastCategory ? categories.all : lastCategory;
};

<code> 

Luego la llamamos así en el useState(getLastCategory), no coloquen getLastCategory() porque va a ejecutarse cada vez que el componente se renderice, en cambio si se coloca getLastCategory simplemente se ejecuta cuando el componente se monta por primera vez y de esa manera el estado de la categoría va iniciar con última categoría visitada.

{left_items.map(({ path_link, path_name }, index) => (
• <NavLink to={path_link} className={handleActive} onClick={() => { checkPathName(path_link, path_name); }} > {path_name} </NavLink>
))}

Día 12/01/24 la api esta siendo modificada, que hermoso era los días anteriores. Encima todavia no se tanto como para consumir otra api, quise cambiarla pero se me rompió el código y lo dejé mejor como estaba.

Yo pienso que es más fácil crear un componente para cada vista de categorías (Aunque podría ser mejor alguna función que nos filtre si tenemos muchas categorias)

import { useContext } from "react";
import { Card } from "../../Components/Card/Card";
import { Layout } from "../../Components/Layout/Layout";
import { ShoppingCartContext } from "../../Context/Context";



function ClothesPage() {
    const context = useContext(ShoppingCartContext);
    return (
        <Layout>
           <p className="text-white">Clothes</p>
            <div className="grid grid-cols-4 gap-4 mt-10 w-full max-w-screen-lg">
          {
            context.items?.map( (item)=> (
            item.category.name === "Clothes" &&  <Card data={item} key={item.id}/>
// Lo único que hago es en cada componente ver si en los items hay un item con el nombre de la categoría deseada y lo renderizo
            ) )
          }
          </div>
        </Layout>
    )
}


export {ClothesPage}

Les comparto mi solución:

…

…

Asi como realice cambio en Navbar para pasarle la categoria y un manejador del click al NavLink que al principio de este curso habiamos generado un componente llamado NavItem

…

…
resultando mi Navbar de la siguiente forma

…

• <NavLink to='/'> Shopi </NavLink>
{categories.map(category => (
• <NavLink to={`/category/${normalizeCategory(category)}`} className={({ isActive }) => isActive ? activeStyle : undefined } > {category} </NavLink>
))}

• [email protected]
• <NavLink to='/my-orders' className={({ isActive }) => isActive ? activeStyle : undefined }> My Orders </NavLink>
• <NavLink to='/my-account' className={({ isActive }) => isActive ? activeStyle : undefined }> My Account </NavLink>
• <NavLink to='/sign-in' className={({ isActive }) => isActive ? activeStyle : undefined }> Sign In </NavLink>
• <ShoppingBagIcon className='w-6 h-6' onClick={() => setOpenCheckoutSM(state => !state)} />
  {cartProducts.length}

Yo lo hice como lo nos explicó Jenny, pero aún así no me filtraba a pesar de seleccionar las categorías, tuve que realizar estas modificaciones y así si me funcionó:

CONTEXT

    const filterBy = (searchType, items, searchByTitle, searchByCategory) =>{

        if (searchType ==="BY_TITLE"){
            return filteredItemsByTitles(items, searchByTitle)
        }

        if (searchType ==="BY_CATEGORY"){
            return filteredItemsByCategory(items, searchByCategory)
        }

        if (searchType ==="BY_TITLE_AND_CATEGORY"){
            return filteredItemsByCategory(items, searchByCategory).filter(item => item.title.toLowerCase().includes(searchByTitle.toLowerCase()))
        }

        if (searchType === "NULO"){
            return items
        }
    }

    useEffect(()=>{
        if (searchByTitle && !searchByCategory) setFilteredItems(filterBy("BY_TITLE", items, searchByTitle, searchByCategory))
        if (searchByCategory && !searchByTitle) setFilteredItems(filterBy("BY_CATEGORY", items, searchByTitle, searchByCategory))
        if (!searchByCategory && !searchByTitle) setFilteredItems(filterBy("NULO", items, searchByTitle, searchByCategory))
        if (searchByCategory && searchByTitle) setFilteredItems(filterBy("BY_TITLE_AND_CATEGORY", items, searchByTitle, searchByCategory))

    }, [items, searchByTitle, searchByCategory])

HOME:

const renderView =() =>{
  if (searchByTitle?.length > 0){
    if (filteredItems?.length > 0){
      return(
        filteredItems?.map(item => (
          <Card key={item.id} data={item} />))
      )
    }else{
      return(
        <div>We don´t have anything :(</div>
      )
    }
  }else{
    return (
      filteredItems?.map(item => (
        <Card key={item.id} data={item} />
      ))
    
    )

  }
}

Buenassss
Mi solución:

Facilite y cambien un poco la logica de los filtros para que se mas facil agregar mas filtros en un futuro

    const filterItemsMultiple = (items, searchByTitle, searchByCategory) => {
        let newFilter = items
        
        if (searchByTitle) {
            newFilter = newFilter?.filter(item => item.title.toLowerCase().includes(searchByTitle.toLowerCase()))
        }

        if (searchByCategory) {
            newFilter = newFilter?.filter(item => item.category.id === searchByCategory )
        }
        return newFilter
    }

    useEffect(() => {
        setFilteredItems(filterItemsMultiple(items, searchByTitle, searchByCategory))
    }, [items, searchByTitle, searchByCategory])

y en vez de mandar el string de la categoria mande el id de la categoria

EJ:

onClick={() => context.setSearchByCategory(null)}
onClick={() => context.setSearchByCategory(1)}
onClick={() => context.setSearchByCategory(2)}
onClick={() => context.setSearchByCategory(3)}
onClick={() => context.setSearchByCategory(4)}
onClick={() => context.setSearchByCategory(5)}

y del lado del componente home

const Home = () => {
    
    const context = useContext(ShoppingCartContext)

    const renderView = () => {
      const items = context.searchByTitle?.length > 0 || context.searchByCategory ?
        context.filteredItems :
        context.items
      

      if (items?.length > 0) {
        return (
          items?.map(
            (item) => (<Card key={item.id} data={item} />)
          )
        )
      } else {
        return (
          <p className='font-medium text-xl'> No result Found </p>
        )
      }
    }

    return (
      <Layout>
        <div className='flex items-center justify-center w-80 relative mb-4'>
          <h1 className='font-medium text-xl'>Exclusive products</h1>
        </div>
        <input 
          type="text" 
          placeholder='Search a product' 
          className='border border-black rounded-lg w-80 p-3 mb-4 focus:outline-none'
          onChange={(event) => context.setSearchByTitle(event.target.value) }
        />
        <div className='grid gap-4 grid-cols-4 w-full max-w-screen-lg'>
        {renderView()}
        </div>
        <ProductDetail />
      </Layout>
    )
  }

Otra solución que hace prácticamente lo mismo:

// En la página Home
export function Home() {
  const currentPath = window.location.pathname;
  const tableIndex = currentPath.split("/"); // ['', 'clothes']
  const categoryName = tableIndex[tableIndex.length - 1];
  const isInAllCategory = categoryName === "";

  let productsToRender: Product[] = [];

  const searchForMatches = (listOfProducts: Product[]) => {
    const filteredProducts = listOfProducts.filter((product) => {
      const productTitle = product.title.toLowerCase();
      const searchTitle = searchTitleProduct.toLowerCase();
      return productTitle.includes(searchTitle);
    });

    return filteredProducts;
  };

  if (isInAllCategory) {
    productsToRender = searchForMatches(products);
  } else {
    const categoryProducts = products.filter((product) => {
      const productCategory = product.category.name.toLowerCase();
      const categoryToSearch = categoryName.toLowerCase();
      return productCategory.includes(categoryToSearch);
    });

    productsToRender = searchForMatches(categoryProducts);
  }

  return (
    <>
      <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-4">
        {(productsToRender?.length === 0)
          ? <p>No products found :(</p>
          : productsToRender?.map((product) => (
            <Card key={product.id} {...product} />
          ))}
      </div>
    </>
  );
}

este fue el metodo en el componente
home

 let category = context.selectedNavItem === "All" ? null : context.selectedNavItem;
  let filteredItems = items;

  if (category) {
    filteredItems = items?.filter(
      (item) =>
        item.category.toLowerCase() === category.toLowerCase() &&
        item.title.toLowerCase().includes(searchByTitle?.toLowerCase())
    );
  } else {
    filteredItems = items?.filter((item) =>
      item.title.toLowerCase().includes(searchByTitle?.toLowerCase())
    );
  }

y la cateogria se toma con un click debido a como tengo planteado mi codigo

adicionalmente el state de searchByTitle se definio como string vacio

  const [searchByTitle, setSearchByTitle] = useState("");

por eso si se deja el imput vacio y tiene cateogria aun sigue filtrando

Simplificacion de codigo
Pongan todo lo que tiene que ver con:

• Filtrado por busqueda
• Filtrado por categoria
• Funcion renderizadora
  Dentro del componente HOME* y mejor usen su tiempo en hacer que la app sea vea mas bonita. =)

Qué sucedió aquí?

Yo estoy usandolo desde Context, los dejo por si les sirve a alguien de referencia.

Declare estos useContext

const { searchByTitle, setSearchByTitle, filteredItems, items, filteredItemsByCategory, setFilteredItemsByCategory } = context

En renderView, añadí la siguiente lógica

const renderView = () => {

    const pathSplitted = window.location.pathname.split('/');
    let category = pathSplitted[pathSplitted.length - 1];

    const FilteredItemsByCategory = (items, category ) => {
        if (category.length === 0) {
          return items?.map(item => item)        
        } else {
          return items?.filter((item) => item.category.name.toLowerCase().replace(/\s/g, '') === category)
        }
    }

    useEffect(() => {
      setFilteredItemsByCategory(FilteredItemsByCategory(items, category))
    }, [category])

    if (searchByTitle?.length > 0) {
      if (filteredItems?.length > 0) {
            return (
              filteredItems?.map(item => (
                <Card key={item.id} data={item} />
              ))
            )
          } else {
            return (
              <div className='flex items-center justify-center mt-10 w-screen'>
                <p className="text-center">We could not find it</p>
              </div>
            )
      }
    } else {
        return (
          filteredItemsByCategory?.map(item => (
            <Card key={item.id} data={item} />
          ))
        )
      }
  }

Yo utilicé un custom hook:

import React, {useContext} from 'react';
import { Context } from '../../Context';
import Loader from '../Loader';
import Layout from '../Layout';
import Card from '../Card';

function UseCertainCategory({cat}) {
  const {products, loading} = useContext(Context)
  
      const category = products?.filter(product => product.category.name == cat);

  return (
    <Layout>
        {!loading && <Loader/>}
        <div className='grid place-content-center lg:grid-cols-4 gap-3 mt-5 w-full max-w-screen-lg md:grid-cols-3 sm:grid-cols-2 grid-cols-1'>

        {loading && category?.map(product=>(

            <Card key={product.id}
              name={product.title}
              category={product.category.name}
              img={product.images[0]}
              price={product.price}
              description={product.description}
              id={product.id}/>
            ))
              }
        </div>
    </Layout>
  )
}

export default UseCertainCategory;