{"id":7060,"date":"2023-03-14T07:22:26","date_gmt":"2023-03-14T07:22:26","guid":{"rendered":"https:\/\/www.ardorsys.com\/blog\/?p=7060"},"modified":"2023-03-14T07:24:34","modified_gmt":"2023-03-14T07:24:34","slug":"how-to-create-a-type-and-search-component-in-next-js-react","status":"publish","type":"post","link":"https:\/\/www.ardorsys.com\/blog\/how-to-create-a-type-and-search-component-in-next-js-react\/","title":{"rendered":"How to Create a type and search Component in Next.js React?"},"content":{"rendered":"

Here is an example of how you can create a type-and-search component in Next.js<\/a> using the useState<\/code> hook and the fetch<\/code> function:<\/p>\n

\r\nimport { useState } from 'react';\r\n\r\nfunction TypeAndSearch({ data }) {\r\n  const [searchTerm, setSearchTerm] = useState('');\r\n  const [results, setResults] = useState([]);\r\n\r\n  async function handleSearch(e) {\r\n    e.preventDefault();\r\n    const response = await fetch(`\/api\/search?q=${searchTerm}`);\r\n    const data = await response.json();\r\n    setResults(data);\r\n  }\r\n\r\n  return (\r\n    
\r\n       setSearchTerm(e.target.value)}\r\n      \/>\r\n