{"id":10095,"date":"2024-04-16T04:34:26","date_gmt":"2024-04-16T04:34:26","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=10095"},"modified":"2024-05-01T11:30:08","modified_gmt":"2024-05-01T11:30:08","slug":"filter-items-based-on-multiple-properties","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/filter-items-based-on-multiple-properties","title":{"rendered":"Filter Items Based On Multiple Properties"},"content":{"rendered":"<p>Filter function <strong>containsSearchTerm<\/strong> expecting an item and a user-inputted search term, efficiently navigating arrays.Its versatility extends to selecting properties from item objects for searching purposes. In our example, we use two terms\u2014title and description\u2014yet it seamlessly adjusts to accommodate more.<\/p>\n<h3>Efficient Search Logic<\/h3>\n<p>Leveraging JavaScript&#8217;s array methods, our filter function swiftly sorts through items. It converts search terms to lowercase for a case-insensitive search. By utilizing the some method, we ensure items matching any specified property remain within the filtered results.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nfunction containsSearchTerm(item, searchTerm) {\r\n  const { title, description } = item;\r\n  const lowerCasedSearchTerm = searchTerm.toLowerCase();\r\n\r\n  return (\r\n    [title, description].some(str =&gt; str.toLowerCase().includes(lowerCasedSearchTerm))\r\n  );\r\n}\r\n<\/pre>\n<p>Looking ahead, let&#8217;s explore how this function integrates within a React application for filtering a list of items based on user input.<\/p>\n<p><strong>App.js<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nimport * as React from \"react\";\r\nconst items = [\r\n  {\r\n    title: \"React\",\r\n    description:\r\n      \"React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.\"\r\n  },\r\n  {\r\n    title: \"JavaScript\",\r\n    description:\r\n      \"JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is widely used to make web pages interactive and provide online programs, including video games.\"\r\n  },\r\n];\r\n\r\nfunction containsSearchTerm(item, searchTerm) {\r\n  const { title, description } = item;\r\n  const lowerCasedSearchTerm = searchTerm.toLowerCase();\r\n  return (\r\n    [title, description].some(str => str.toLowerCase().includes(lowerCasedSearchTerm));\r\n    \t\t\t\t\r\n  );\r\n}\r\nexport default function App() {\r\n  const [searchTerm, setSearchTerm] = React.useState(\"\");\r\n  const inputRef = React.useRef();\r\n\r\n  React.useEffect(() => {\r\n    inputRef.current.focus();\r\n  }, []);\r\n\r\n  const handleChange = event => {\r\n    setSearchTerm(event.target.value);\r\n  };\r\n\r\n  const filteredItems = items.filter(item =>\r\n    containsSearchTerm(item, searchTerm)\r\n  );\r\n\r\n  return (\r\n    <>\r\n      <header>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Type to filter...\"\r\n          value={searchTerm}\r\n          onChange={handleChange}\r\n          ref={inputRef}\r\n        \/>\r\n      <\/header>\r\n      <ul>\r\n        {filteredItems.map(({ title, description }, i) => (\r\n          <li key={i} className=\"box\">\r\n            <h1>{title}<\/h1>\r\n            <p>{description}<\/p>\r\n          <\/li>\r\n        ))}\r\n      <\/ul>\r\n    <\/>\r\n  );\r\n}\r\n<\/pre>\n<p>Within this React component, we utilize the containsSearchTerm function to filter items based on the user&#8217;s input. The useState hook manages the search term state, while the useRef hook focuses the input field during component mounting..<\/p>\n<p>This configuration establishes a dynamic filtering mechanism, enhancing user experience and interaction with the application. By implementing such optimized solutions, developers can ensure robust functionality while maintaining code clarity and efficiency.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Filter function containsSearchTerm expecting an item and a user-inputted search term, efficiently navigating arrays.Its versatility extends to selecting properties from item objects for searching purposes. In our example, we use two terms\u2014title and description\u2014yet it seamlessly adjusts to accommodate more. Efficient Search Logic Leveraging JavaScript&#8217;s array methods, our filter function swiftly sorts through items. It [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10087,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10095"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=10095"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10095\/revisions"}],"predecessor-version":[{"id":10097,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10095\/revisions\/10097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/10087"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=10095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=10095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=10095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}