{"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":"<p>Here is an example of how you can create a type-and-search component in <a href=\"https:\/\/www.ardorsys.com\/blog\/creating-dynamic-scorecard-with-live-updates-in-next-js\/\">Next.js<\/a> using the <code>useState<\/code> hook and the <code>fetch<\/code> function:<\/p>\n<pre lang=\"javascript\" escaped=\"true\">\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    <form onSubmit={handleSearch}>\r\n      <input\r\n        type=\"text\"\r\n        value={searchTerm}\r\n        onChange={(e) => setSearchTerm(e.target.value)}\r\n      \/>\r\n      <button type=\"submit\">Search<\/button>\r\n      <ul>\r\n        {results.map((item) => (\r\n          <li key={item.id}>{item.name}<\/li>\r\n        ))}\r\n      <\/ul>\r\n    <\/form>\r\n  );\r\n}\r\n\r\nexport default TypeAndSearch;\r\n\r\n<\/pre>\n<p>In this example, the <code>TypeAndSearch<\/code> component has a state variable <code>searchTerm<\/code> that is used to store the search term entered by the user, and a state variable <code>results<\/code> that is used to store the search results. The <code>handleSearch<\/code> function is called when the form is submitted and uses the <code>fetch<\/code> function to send a request to the server with the search term. The server should return a JSON array of search results, which is then stored in the <code>results<\/code> state variable. The <code>TypeAndSearch<\/code> component then displays the search results in an unordered list.<\/p>\n","protected":false},"excerpt":{"rendered":"Here is an example of how you can create a type-and-search component in Next.js using the useState hook&hellip;\n","protected":false},"author":1,"featured_media":7074,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60,62],"tags":[179,64,96],"class_list":["post-7060","post","type-post","status-publish","format-standard","has-post-thumbnail","category-nodejs","category-react","tag-next-js","tag-reactjs","tag-reactjs-development"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/7060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/comments?post=7060"}],"version-history":[{"count":4,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/7060\/revisions"}],"predecessor-version":[{"id":7077,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/7060\/revisions\/7077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/media\/7074"}],"wp:attachment":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/media?parent=7060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/categories?post=7060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/tags?post=7060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}