{"id":7441,"date":"2023-10-07T20:02:31","date_gmt":"2023-10-07T14:32:31","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=7441"},"modified":"2023-10-07T20:05:17","modified_gmt":"2023-10-07T14:35:17","slug":"7441-2","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/","title":{"rendered":"Search Function in React JS to display List with filtered items"},"content":{"rendered":"\n

Search Function in React JS to display List with filtered items<\/strong><\/p>\n\n\n\n

To add a search function for a list in a React Component, we can follow these steps:
1. Create a new state variable to hold the search query.<\/p>\n\n\n\n

2. Update the map function that renders the table rows to filter the array based on the search query.<\/p>\n\n\n\n

3. Add an input field where users can enter their search query and update the state with the user\u2019s input.<\/p>\n\n\n\n

Example:<\/u><\/strong>

Here we have an array, adminProducts which needs to be filtered and displayed based on the query given for search function.

const [searchQuery, setSearchQuery] = useState(\u2018\u201d\u201d);<\/p>\n\n\n\n

<\/p>\n\n\n\n

A set variable \u201csearchQuery\u201d is used here to store the search query given by the user for search function.<\/p>\n\n\n\n

<TextField<\/p>\n\n\n\n

name = \u2018search\u2019<\/p>\n\n\n\n

placeholder = \u2018Search\u2019<\/p>\n\n\n\n

InputProps = {{<\/p>\n\n\n\n

endAdorment : (<\/p>\n\n\n\n

<IconButton><\/p>\n\n\n\n

<SearchIcon \/><\/p>\n\n\n\n

<\/IconButton><\/p>\n\n\n\n

value = {searchQuery}<\/p>\n\n\n\n

onChange ={ (e) => setSearchQuery(e.target.value)}<\/p>\n\n\n\n

\/><\/p>\n\n\n\n

Another array is declared to store the filtered items obtained by filtering from the list.<\/p>\n\n\n\n

const filteredAdminProducts = adminProducts.filter((contact) =>{<\/p>\n\n\n\n

return (<\/p>\n\n\n\n

searchQuery.trim() ===  \u2018 \u2018 ||    \/\/ if the search query is empty, show all items<\/p>\n\n\n\n

Object.values(contact).some((value) = ><\/p>\n\n\n\n

Value.toString().toLowerCase().includes(searchQuery.toLowerCase())<\/p>\n\n\n\n

)<\/p>\n\n\n\n

);<\/p>\n\n\n\n

});<\/p>\n\n\n\n

Finally use the filtered array to display the list:<\/p>\n\n\n\n

<TableBody><\/p>\n\n\n\n

{filteredAdminProducts.map((contact, index) => (<\/p>\n\n\n\n

<TableRow key ={ contact.id}><\/p>\n\n\n\n

{\/* code to display the list *\/}<\/p>\n\n\n\n

<\/TableRow><\/p>\n\n\n\n

))}<\/p>\n\n\n\n

<\/TableBody><\/p>\n","protected":false},"excerpt":{"rendered":"

Search Function in React JS to display List with filtered items To add a search function for a list in a React Component, we can follow these steps:1. Create a new state variable to hold the search query. 2. Update the map function that renders the table rows to filter… Continue Reading Search Function in React JS to display List with filtered items<\/span><\/i><\/a><\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-7441","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/7441-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Search Function in React JS to display List with filtered items To add a search function for a list in a React Component, we can follow these steps:1. Create a new state variable to hold the search query. 2. Update the map function that renders the table rows to filter… Continue Reading Search Function in React JS to display List with filtered items\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/7441-2\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-07T14:32:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-07T14:35:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3837\" \/>\n\t<meta property=\"og:image:height\" content=\"2540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brindha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brindha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/\"},\"author\":{\"name\":\"Brindha\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/32dac30adb7fda20718df787cd6572f9\"},\"headline\":\"Search Function in React JS to display List with filtered items\",\"datePublished\":\"2023-10-07T14:32:31+00:00\",\"dateModified\":\"2023-10-07T14:35:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/\"},\"wordCount\":242,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"datePublished\":\"2023-10-07T14:32:31+00:00\",\"dateModified\":\"2023-10-07T14:35:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/7441-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Search Function in React JS to display List with filtered items\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/32dac30adb7fda20718df787cd6572f9\",\"name\":\"Brindha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"caption\":\"Brindha\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/brindha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Search Function in React JS to display List with filtered items To add a search function for a list in a React Component, we can follow these steps:1. Create a new state variable to hold the search query. 2. Update the map function that renders the table rows to filter… Continue Reading Search Function in React JS to display List with filtered items","og_url":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2023-10-07T14:32:31+00:00","article_modified_time":"2023-10-07T14:35:17+00:00","og_image":[{"width":3837,"height":2540,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png","type":"image\/png"}],"author":"Brindha","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Brindha","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/"},"author":{"name":"Brindha","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/32dac30adb7fda20718df787cd6572f9"},"headline":"Search Function in React JS to display List with filtered items","datePublished":"2023-10-07T14:32:31+00:00","dateModified":"2023-10-07T14:35:17+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/"},"wordCount":242,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/7441-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/","url":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"datePublished":"2023-10-07T14:32:31+00:00","dateModified":"2023-10-07T14:35:17+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/7441-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/7441-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Search Function in React JS to display List with filtered items"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/32dac30adb7fda20718df787cd6572f9","name":"Brindha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","caption":"Brindha"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/brindha\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-1W1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/503"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7441"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7441\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}