Construir un buscador en React implica más que un input visible: requiere mover el estado al lugar correcto, capturar lo que el usuario escribe y dejar todo listo para filtrar. Si trabajas con productos en una e-commerce y quieres que la búsqueda sea reutilizable, este flujo te muestra cómo refactorizar tu código y conectar un campo de texto con el contexto global.

¿Por qué hacer un refactor del estado local al contexto global?

Cuando un dato se usa en varias partes de la aplicación, mantenerlo en estado local rompe la consistencia. La lista de productos del home va a viajar al carrito, al checkout y al buscador, así que tiene sentido moverla a un contexto compartido.

El refactor sigue tres movimientos claros:

• Sacar el estado items de la página home y llevarlo al archivo de contexto.
• Mover también el fetch que carga los productos, junto con su useEffect.
• Exponer items y setItems desde el provider para que cualquier componente los consuma.

Después del refactor, home deja de usar useState y useEffect. En su lugar importa useContext y el ShoppingCartContext, y lee items directamente desde ahí. El resultado visual es idéntico, pero ahora el estado es global.

¿Qué es un refactor en React? Es reorganizar el código sin cambiar lo que hace el usuario. Aquí mueves el estado de un componente a un contexto para que más partes de la app puedan leerlo.

¿Cómo construir el input de búsqueda con Tailwind?

Antes del campo de texto, conviene darle jerarquía visual a la sección. El título de home se reemplaza por un H1 con la frase Exclusive Products, lo que da más fuerza visual que un genérico "Home".

Debajo del título va el input, con estos atributos:

• type="text" para texto libre.
• placeholder="Search a product" como pista al usuario.
• Clases de Tailwind: rounded-lg, border border-black, un width cómodo, p-4 de padding interno y mb-4 para separarlo de la grilla de productos.

Hay un detalle estético que vale la pena cuidar: el borde azul que aparece al hacer foco rompe el look and feel. Tailwind permite resolverlo con la pseudoclase focus:, aplicando focus:outline-none directamente sobre el input.

¿Cómo capturar lo que el usuario escribe?

El input por sí solo no guarda nada. Para detectar cada tecla, se agrega el atributo onChange, que recibe una función con el evento del DOM:

jsx <input type="text" placeholder="Search a product" className="rounded-lg border border-black w-80 p-4 mb-4 focus:outline-none" onChange={(event) => setSearchByTitle(event.target.value)} />

La clave está en event.target.value, que devuelve el texto actual del campo cada vez que cambia.

¿Dónde guardar el valor de búsqueda en el contexto?

Guardar ese valor en el componente local sería volver al problema inicial. La solución es declararlo en el mismo contexto donde viven los productos.

En el archivo de contexto se agrega un nuevo estado:

jsx const [searchByTitle, setSearchByTitle] = useState(null)

Luego se incluyen ambos, searchByTitle y setSearchByTitle, dentro del value del provider. Así, home puede llamar a setSearchByTitle desde el onChange del input, y cualquier otro componente que necesite filtrar también podrá leer ese valor.

Para verificar que todo funciona, un console.log(searchByTitle) dentro del contexto muestra cómo cada tecla actualiza el estado. Al abrir la consola del navegador y escribir cualquier palabra, los caracteres aparecen en tiempo real.

¿Para qué sirve el evento onChange en un input de React? Detecta cualquier cambio en el campo y entrega el nuevo valor a través de event.target.value. Sin él, el estado no sabría qué está escribiendo el usuario.

¿Qué ventaja tiene usar useContext aquí?

Al centralizar items y searchByTitle en el mismo contexto, el filtrado se vuelve trivial: cualquier componente puede comparar la lista de productos contra el texto buscado sin pasar props manualmente. Esa es la razón por la que el refactor se hace antes de tocar la lógica de filtros.

El trabajo de esta etapa deja dos piezas listas: un estado global preparado para crecer y un input que ya captura información en vivo. Sobre esa base se construye el filtrado real de productos por título en el siguiente paso.

¿Tú también prefieres mover el estado al contexto desde el inicio o esperas a necesitarlo? Cuéntame en los comentarios cómo decides cuándo un estado deja de ser local.