Quiero buscar el título de un producto con una barra de búsqueda. Estoy usando una API local con Next.js. Quiero buscar los productos por título.

URL API Siguiente

 http://localhost:3000/api/products

Datos JSON

 { id: "1", title: "Polo manga corta", image: "https://res.cloudinary.com/dj1ethf6d/image/upload/v1654948335/Mayoral/polo-manga-corta-contrastes-chico_id_22-06107-044-M-4_yfe04a.jpg", price: 12.9 }

Consulta del controlador

 import { products } from './dataproducts' export default async function handlerTitle (req, res){ const products = req.query const getTitle = await fetch( `http://localhost:3000/api/products/${products}` ); const data = await getTitle.json(products); res.status(200).json(data); }

Componente de búsqueda

 import { useState } from 'react' import styles from '../../styles/SearchBar.module.css' function SearchBar({ data }) { const [query, setQuery] = useState('') const onChange = async (e) => { const {value} = e.target; setQuery(value) if (value.length > 3) { const response = await fetch(`http://localhost:3000/api/products?=${value}`); const data = await response.json(); console.log(response) } }

entrada pasándole el onChange y el valor

 return ( <input className={styles.input} onChange={onChange} id='city' type="search" name="search" value={query} placeholder="Nombre producto..." /> ) } export default SearchBar