No tienes acceso a esta clase

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

Buscador de productos

26/31
Recursos

Aportes 7

Preguntas 5

Ordenar por:

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

Buenaas, Tengo una duda... utilizar el context de esta manera en el que lo venimos utilizando no estaría en contra de los principios SOLID ya que está teniendo mucho más que una sola responsabilidad? Perdón si dije una burrada :')

Yo voy trabajando dos archivos a la vez, o sea uno que es igual como la profe Teff lo hace y otro a mi manera, y desde la primera clase lo habia hecho así, consumí la API desde el contexto, porque entendía que la aplicación entera necesitaría de los datos de la API

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 ūüė¶

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

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

Le puse un icono para completar :)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-24%20112807-231c9728-1fef-400b-bcfa-fe9eeb778031.jpg)

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