Filtrando títulos con JavaScript

Simplifiquemos el código:

const renderView = () => {
    const itemsToRender = context.SearchByTitle?.length > 0
      ? context.FilteredItems
      : context.Items;

    if (itemsToRender?.length > 0) {
      return itemsToRender.map(item => (
        <Card key={item.id} data={item} />
      ));
    } else {
      return <p>No Results Found</p>;
    }
  };

Yo tengo esta solución, que me pareció mas simple .

• Darle como valor inicial un string vacío

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

• cambiar un poco el useEffect:

useEffect(() => {
	if (searchByTitle.length > 0) {
		setFilteredProducts(filterProductsByTitle(products, searchByTitle));
	} else {
		setFilteredProducts(products);
	}
}, [products, searchByTitle]);

• Cambiar el producto en el .map() del home:

<div className='grid grid-cols-4 w-full max-w-screen-lg'>
	{filteredProducts.map((product) => (
		<Card key={product.id} item={product} />
	))}
	<ProductDetail />
</div>

Creo que el arreglo original de items no debería incluirse en el estado. Yo debería tener una constante que almacene ese arreglo después de hacer un llamado a la función que hace el fetch, y hacerle un freeze() para volverlo inmutable. No debería ponerlo en el estado porque eso lo hace susceptible de ser modificado así sea por error. Ese arreglo nunca debe cambiar. El filtered en cambio si debe estar en el estado, se espera que cambie cada vez que cambia el contenido del input. Lo que esperamos que no cambie nunca no debe ponerse en el estado. Cuando el input esté vacío, se puede setear el filtered con un spread (copia) del arreglo de items original inmutable para que haga re-render. No es algo crítico, pero ayuda a evitar errores.

Aqui si que me enrede un poquito 😦

Buenas a todos! Yo lo hice un poco distinto. Acepto criticas constructivas:
*Home/index.jsx:
//Agregue property value en el imput:

        <input 
          type="text" 
          placeholder='Search a product'
          className='rounded-lg border border-black p-4 mb-4 w-3/4 focus:outline-none'
          value={context.searchByTitle}
          onChange={(event) => context.setSearchByTitle(event.target.value) } />
      
      <div className='grid gap-1 grid-cols-4 w-full max-w-screen-lg'>
        { 
            context.filteredItemsByTitle?.map(item => (
              <Card key={item.id} data={item} />
            ))
        }
      </div>

En Context/index.jsx:
//No agrego el estado filteredItems, solo hago una funcion filteredItemsByTitle y luego lo pase en el provider:

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

Yo lo hice directamente con el render principal, ya que todos los productos en su titulo tienen un espacio:

{loading && products.map(product=>{
        if(product.title.toLowerCase().includes(searchValue.toLowerCase())){
          
          return<Card 
          key={product.id}
          name={product.title}
          category={product.category.name}
          img={product.images[0]}
          price={product.price}
          description={product.description}
          id={product.id}
          />
        }
      })}

Por aquí dejo un hook useDebounce para que no se haga la búsqueda cada vez que se escriba.

import { useEffect, useState } from 'react';

export const useDebounce = (value: string, delay: number) => {
  const [debounceValue, setDebounceValue] = useState('');
  useEffect(() => {
    const timeoutId = setTimeout(() => setDebounceValue(value), delay);

    return () => {
      clearTimeout(timeoutId);
    };
  }, [value]);

  return debounceValue;
};

Yo me llevé el div a renderView asi se me veia todo completo y las columnas aparecen cuando sea necesario. Me quedaba el “no hay resultados” en una sola columna de las 4

const renderView = () => {
    if (context.searchValue?.length > 0) {
      if (context.filteredItems?.length > 0) {
        return (
          <div className='flex pb-10 flex-col md:grid md:grid-cols-3 lg:grid lg:grid-cols-4 mx-auto items-center w-4/5 justify-center gap-4 md:gap-6  lg:gap-10'>
            {context.filteredItems?.map((item) => {
              return <Card key={item.id} {...item} />;
            })}
          </div>

        )
      } else {
        return (
          <div className='flex flex-col justify-center items-center space-x-2 mx-auto py-28'>
            <img className='w-28 ' src="imagen" alt="no results" />
            <h2 className='text-center text-3xl opacity-60 py-6'>No Result Found</h2>
            <p className='text-center text-xl opacity-60'>We can't find any item matching your search</p>
          </div>
        )
      }

    } else {
      return (
        <div className='flex pb-10 flex-col md:grid md:grid-cols-3 lg:grid lg:grid-cols-4 mx-auto items-center w-4/5 justify-center gap-4 md:gap-6  lg:gap-10'>
          {context.items?.map((item) => {
            return <Card key={item.id} {...item} />;
          })}
        </div>

      )
    }
  }

A mi se me ocurrio poner un else que llene los items en filtered items para dejarlo a como funciona por default

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

Si le ponen un <div></div> y un <div></div> después del elemento de “We don’t have anything to show” el texto se centra. Sólo así conseguí centrarlo, aunque no en todos los tamaños.

Podemos utilizar directamente filteredItems:

const [items, setItems] = useState([]);
  const [filteredItems, setFilteredItems] = useState([]);
  const [searchValue, setSearchValue] = useState("");

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

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

function Home() {
  const { 
    setSearchValue,
    filteredItems
  } = useContext(ShoppingCartContext);

  return (
    <>
      <div className="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 => setSearchValue(event.target.value)}
      />
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
        {filteredItems?.map((item) => (
          <Card key={item.id} data={item} />
        ))}
        {filteredItems.length === 0 && <p>No products</p>}
      </div>
      <ProductDetail />
    </>
  );
}

Mi solución sin usar if fue esta que opinan ?

Primero selecciona el array que quiero que usar la lista por defecto o la filtrada,

const itemsToRender = () => searchBar.length > 0 ? filteredItems : items;

Luego hice un render condicional para que me muestre el componente de vacio o las tarjetas de productos

        (itemsToRender() < 1 && searchBar.length > 0)
            ? <p>Not Found</p>
            : itemsToRender()?.map((item) => (<Card data={item} key={item.id} /> ))
       

y en el contex quedo de esta forma

  //filter items
  const [items, setItems] = useState(null)

  const [filteredItems, setfilteredItems] = useState([])

  const filteredItemsByTitle = (items, searchBar) => {
    return (items?.filter((item) =>
    item.title.toLocaleLowerCase().includes(searchBar.toLocaleLowerCase())
  ))
  };
  
  useEffect(() => {
  if (searchBar)setfilteredItems(filteredItemsByTitle(items, searchBar))
  }, [items, searchBar])
  

Reto completado ^^ pude filtrar dependiendo del Name, aunque no sé como mostrar mi resultado por aqui jajaja

Una mejora es usar el filtro de productos como un estado derivado, esto nos permite reducir la cantidad de renders al implementar un efecto adicional, además de usar el useMemo para memorizar el cálculo.

De esta forma, cada vez que se hace un cambio en el setsearchByTitle se realiza el filtro de los productos

  const productsFiltered = useMemo(
    () =>
      products.filter((product) =>
        product.title.toLowerCase().includes(searchByTitle.toLowerCase())
      ),
    [searchByTitle, products]
  );

Y se consume el estado filtrado en el Home.

function Home() {
  const { productsFiltered, error, setsearchByTitle, searchByTitle } =
    useContext(ShoppingCartContext);

  return (
    <Layout>
      <div className="flex  justify-center w-80 relative mb-4">
        <h1 className="font-medium text-xl">Home</h1>
      </div>
      <input
        type="text"
        placeholder="Search a product"
        className="rounded-lg border border-black p-2 w-80 mb-4 focus:outline-none"
        onChange={(event) => setsearchByTitle(event.target.value)}
        value={searchByTitle}
      />
      {error && <h3 className="font-medium text-red-600">{error}</h3>}
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
        {productsFiltered.map((product) => (
          <Card key={product.id} {...product} />
        ))}
      </div>
      <ProductDetail />
    </Layout>
  );
}

Esta es mi opción con todos los condicionales

import { Layout } from "../../Components/Layout"
import { useContext } from "react"
import { Card } from "../../Components/Card"
import { ProductDetail } from "../../Components/ProductDetail"
import { ShoppingCartContext, PropShoppingCart } from "../../Context"

const Home = () => {
  
  const context = useContext<PropShoppingCart | null>(ShoppingCartContext)
  const items = context?.items
  const filteredItems = context?.filteredItems

  return (
    <Layout>
      <div className="flex items-center justify-center relative w-80 mb-4">
       <h1 className="font-medium text-2xl">Exclusive Products</h1>
      </div>
      <input
      className="flex justify-center items-center border border-black rounded-lg w-80 mb-4 p-3"
      type="text"
      placeholder="Search a product"
      onChange={(event) => context?.setSearchByTitle(event.target.value) }
      />
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
        {!context?.searchByTitle? items?.map((item) => (
        <Card key={item.id} {...item}/>
      ) ):
      filteredItems && filteredItems?.length>0?filteredItems.map((item) => (
        <Card key={item.id} {...item}/>
      ) ):
      (<div className="flex justify-center items-center text-2xl">We don´t have this product</div>)
      }
      </div>
      <ProductDetail />
    </Layout>
  )
}

export {Home}

Esta es mi propuesta de código abreviado, usando typescript también

import { Layout } from "../../Components/Layout"
import { useContext } from "react"
import { Card } from "../../Components/Card"
import { ProductDetail } from "../../Components/ProductDetail"
import { ShoppingCartContext, PropShoppingCart } from "../../Context"

const Home = () => {
  
  const context = useContext<PropShoppingCart | null>(ShoppingCartContext)
  const filteredItems = context?.filteredItems

  return (
    <Layout>
      <div className="flex items-center justify-center relative w-80 mb-4">
       <h1 className="font-medium text-2xl">Exclusive Products</h1>
      </div>
      <input
      className="flex justify-center items-center border border-black rounded-lg w-80 mb-4 p-3"
      type="text"
      placeholder="Search a product"
      onChange={(event) => context?.setSearchByTitle(event.target.value) }
      />
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
      {filteredItems && filteredItems?.length>0?filteredItems?.map((item) => (
        <Card key={item.id} {...item}/>
      ) ):(<div className="flex justify-center items-center text-2xl">We don´t have this product</div>)}
      </div>
      <ProductDetail />
    </Layout>
  )
}

export {Home}

Dejando el código simple, se puede solo agregar un signo de interrogación para preguntar si existe un no los datos de filtrado y no hay que hacer ningun tipo de analisis, ya que cuando no se filtra nada, este por defecto muestra todos los productos

const Home = () => {
  
  const context = useContext<PropShoppingCart | null>(ShoppingCartContext)
  const filteredItems = context?.filteredItems

  return (
    <Layout>
      <div className="flex items-center justify-center relative w-80 mb-4">
       <h1 className="font-medium text-2xl">Exclusive Products</h1>
      </div>
      <input
      className="flex justify-center items-center border border-black rounded-lg w-80 mb-4 p-3"
      type="text"
      placeholder="Search a product"
      onChange={(event) => context?.setSearchByTitle(event.target.value) }
      />
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
      {filteredItems?.map((item) => (
        <Card key={item.id} {...item}/>
      ) )}
      </div>
      <ProductDetail />
    </Layout>
  )
}

export {Home}

Para el filtrado cree 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;

Acá lo que yo hice fue “saltarme” un poco la creación de los estados de filteredProducts, solo usé la parte de searchByTitle y en el mismo home hice el filtered.

const Home: FC = () => {
  const { items, searchByTitle, setsearchByTitle } =
    useContext(ShoppingCartContext);

  return (
    <Layout>
      <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={(e) => setsearchByTitle(e.target.value)}
      />
      <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
        {items
          .filter((item) =>
            item.title.toLowerCase().includes(searchByTitle.toLowerCase())
          )
          .map((item) => (
            <Card key={item.id} {...item} />
          ))}
      </div>
      <ProductDetail />
    </Layout>
  );
};