How to search for data with a search bar in Next.js with Local API, using search query?

I want to search for a product's title with a search bar. I am using a local API with Next.js. I want to search the products by title.

Url API Next

JSON Data

{ id: "1", title: "Polo manga corta", image: "", price: 12.9 } 

Handler query

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

Search component

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(`); const data = await response.json(); console.log(response) } } 

input passing it the onChange and value

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

Related questions 3 Search functionality and fetch api in React 0 How do i implement a search bar which fetches information using an API 1 Searchbar in react to call table of data Related questions 3 Search functionality and fetch api in React 0 How do i implement a search bar which fetches information using an API 1 Searchbar in react to call table of data 0 React Search bar fetch API 0 Search Bar with API database 1 best way for searching in NextJS 7 Search box with React-Query 0 Next.js: How to create get request using React Query 0 Next JS fetch API by url query param 1 React-query with NextJs routing Load 7 more related questions Show fewer related questions

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.