Search filter for multiple object in ReactJS
Today we will show you how to implement search filter for multiple object in ReactJS with example.
How to create Search filter for multiple object in ReactJS, Creating a Multi-Filter Function to Filter Out Multiple Attributes, Filter Results with React, react multiple filters, filter multiple values in reactjs, react search filter json, react search filter codepen, react filter on click, react filter multiple conditions, react filter array multiple values.
Checkout more articles on ReactJS
While you are working with grid or list view at that time you may need to implement the filter functionality on an array of the object.
Way to implement search filter for multiple object
1. Create react application
Let’s start with creating the simple react application with the help of the create-react-app. If you don’t know about how to create a react application then refer the below link.
2. Example to render an array
Now we will create a simple example where we use dummy array and render on screen. Checkout the example below.
Render an Array in ReactJS4. Implement search filter
To implement search filter, we will create one function where we pass the search text and based on it we will filter the records and set it back to the state variable.
We have also used the list of columns to be consider as a exclueded columns excludeColumns that we can ignore it from the filter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // exclude column list from filter const excludeColumns = ["id", "color"]; // filter records by search text const filterData = (value) => { const lowercasedValue = value.toLowerCase().trim(); if (lowercasedValue === "") setData(dataList); else { const filteredData = dataList.filter(item => { return Object.keys(item).some(key => excludeColumns.includes(key) ? false : item[key].toString().toLowerCase().includes(lowercasedValue) ); }); setData(filteredData); } } |
In the above function, first we checked the lower cased value, If it’s empty then we set the whole data into the state variable. If search value exists then check the value with each item of an array and return true if exist.
Let’s combine all the code together in App.js file.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 | import React, { useState } from 'react'; function App() { const dataList = [ { "id": 1, "name": "cerulean", "year": 2000, "color": "#98B2D1", "pantone_value": "15-4020" }, { "id": 2, "name": "fuchsia rose", "year": 2001, "color": "#C74375", "pantone_value": "17-2031" }, { "id": 3, "name": "true red", "year": 2002, "color": "#BF1932", "pantone_value": "19-1664" }, { "id": 4, "name": "aqua sky", "year": 2003, "color": "#7BC4C4", "pantone_value": "14-4811" }, { "id": 5, "name": "tigerlily", "year": 2004, "color": "#E2583E", "pantone_value": "17-1456" }, { "id": 6, "name": "blue turquoise", "year": 2005, "color": "#53B0AE", "pantone_value": "15-5217" }, { "id": 7, "name": "sand dollar", "year": 2006, "color": "#DECDBE", "pantone_value": "13-1106" }, { "id": 8, "name": "chili pepper", "year": 2007, "color": "#9B1B30", "pantone_value": "19-1557" }, { "id": 9, "name": "blue iris", "year": 2008, "color": "#5A5B9F", "pantone_value": "18-3943" }, { "id": 10, "name": "mimosa", "year": 2009, "color": "#F0C05A", "pantone_value": "14-0848" }, { "id": 11, "name": "turquoise", "year": 2010, "color": "#45B5AA", "pantone_value": "15-5519" }, { "id": 12, "name": "honeysuckle", "year": 2011, "color": "#D94F70", "pantone_value": "18-2120" }, { "id": 13, "name": "cerulean", "year": 2000, "color": "#98B2D1", "pantone_value": "15-4020" }, { "id": 14, "name": "fuchsia rose", "year": 2001, "color": "#C74375", "pantone_value": "17-2031" }, { "id": 15, "name": "true red", "year": 2002, "color": "#BF1932", "pantone_value": "19-1664" }, { "id": 16, "name": "aqua sky", "year": 2003, "color": "#7BC4C4", "pantone_value": "14-4811" }, { "id": 17, "name": "tigerlily", "year": 2004, "color": "#E2583E", "pantone_value": "17-1456" }, { "id": 18, "name": "blue turquoise", "year": 2005, "color": "#53B0AE", "pantone_value": "15-5217" }, { "id": 19, "name": "sand dollar", "year": 2006, "color": "#DECDBE", "pantone_value": "13-1106" }, { "id": 20, "name": "chili pepper", "year": 2007, "color": "#9B1B30", "pantone_value": "19-1557" }, { "id": 21, "name": "blue iris", "year": 2008, "color": "#5A5B9F", "pantone_value": "18-3943" }, { "id": 22, "name": "mimosa", "year": 2009, "color": "#F0C05A", "pantone_value": "14-0848" }, { "id": 23, "name": "turquoise", "year": 2010, "color": "#45B5AA", "pantone_value": "15-5519" }, { "id": 24, "name": "honeysuckle", "year": 2011, "color": "#D94F70", "pantone_value": "18-2120" } ]; const [searchText, setSearchText] = useState(""); const [data, setData] = useState(dataList); // exclude column list from filter const excludeColumns = ["id", "color"]; // handle change event of search input const handleChange = value => { setSearchText(value); filterData(value); }; // filter records by search text const filterData = (value) => { const lowercasedValue = value.toLowerCase().trim(); if (lowercasedValue === "") setData(dataList); else { const filteredData = dataList.filter(item => { return Object.keys(item).some(key => excludeColumns.includes(key) ? false : item[key].toString().toLowerCase().includes(lowercasedValue) ); }); setData(filteredData); } } return ( <div className="App"> <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br /> Search: <input style={{ marginLeft: 5 }} type="text" placeholder="Type to search..." value={searchText} onChange={e => handleChange(e.target.value)} /> <div className="box-container"> {data.map((d, i) => { return <div key={i} className="box" style={{ backgroundColor: d.color }}> <b>Name: </b>{d.name}<br /> <b>Year: </b>{d.year}<br /> <b>Color: </b>{d.color}<br /> <b>Pantone value: </b>{d.pantone_value} </div> })} <div className="clearboth"></div> {data.length === 0 && <span>No records found to display!</span>} </div> </div> ); } export default App; |
4. Output
That’s it for today.
Thank you for ready. Happy Coding!
Grateful to come across your site. Would be great to see a tutorial on React-Table. Sorting by column, filtering at a global level, styling the table. Thank you for the excellent work!
Hello Andre,
We are glad you liked it. We have noted your points to write an article.
Subscribe us for weekly updates or like and follow us for regular updates.
Keep in touch.
Thank you!
very grateful for your publication.
I would like to ask you what would you do to search for information in a json with an array inside it?
Thank you
I would say perform the reverse process, use the
Object.keys()and iterate through the keys then apply a filter on the array.