No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Buscador de productos

26/31
Recursos

Aportes 4

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

En mi caso dentro de nuestro archivo de context.jsx cree el estado de nuesta searchBar y la funcion.

 // GET Producrs by SerachTitleBar
  const [searchTitleBar, setSearchTitleBar] = useState("")

  const Search = (event) => {
    setSearchTitleBar(event.target.value)
  }

Luego exportamos searchTitleBar y la funcion Search, y quedaria asi

function Home() {
  const context = useContext(ShoppingCartContext);
  console.log(context.searchTitleBar)

  return (
    <>
      <div className="m-4">
        <input 
          className="border border-black rounded-lg w-80 p-4 mb-4 focus:outline-none" 
          type="text" 
          placeholder="Search"
          onChange={context.Search}
        />
      </div>
      <div className="grid gap-4 grid-cols-3 w-full max-w-screen-md">
        {context.product?.map((product) => (
          <Card key={product.id} data={product} />
        ))}
      </div>
      <ProductDetail />
    </>
  );
}

Hola era para saber si alguien sabe como quitar esa X en un input que la verdad me tiene bastante fastidiado, siempre aparecexdd o al menos como puedo buscar para quitarla, como se llama o que ūüė¶

Bueno, yo hace tiempo hice una p√°gina con Next.js y Tailwind donde implement√© una barra de b√ļsqueda
Hajime No Ippo
Y les comparto el c√≥digo donde est√° la l√≥gica para la barra de b√ļsqueda repo de github

Lo hice así:

{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}
          />
        }
      })}