Buscador de productos

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

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 😦

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