How to Filter Arrays in React
Filtering is a process that creates an array filled with all array elements that pass a test. In this article we’re going to see how to filter arrays in React.
Table of Contents
Filter Single Array
Let’s assume an array:
const students = ['Obydul', 'Kabir', 'Hussain', 'Kamrul'];
Now we want to find students that match with the condition:
{students.filter(student => student.includes('K')).map(filteredStudent => (
<li>
{filteredStudent}
</li>
))}
This condition will print all student names that contain character “K“. The final code looks like:
import React from 'react';
const students = ['Obydul', 'Kabir', 'Hussain', 'Kamrul'];
function App() {
return (
<ul>
{students.filter(student => student.includes('K')).map(filteredStudent => (
<li>
{filteredStudent}
</li>
))}
</ul>
);
}
export default App;
Filter Multidimensional Array
Let’s assume a multidimensional array:
const students = [
{
'id': 1,
'name': 'Obydul',
'age': 25
},
{
'id': 2,
'name': 'Kabir',
'age': 24
},
{
'id': 3,
'name': 'Hussain',
'age': 30
},
{
'id': 4,
'name': 'Kamrul',
'age': 35
},
];
From this array, we want to get those students under the age of 30. So, the condition should be:
{students.filter(student => student.age < 30).map(filteredStudent => (
<tr>
<td>{filteredStudent.id}</td>
<td>{filteredStudent.name}</td>
<td>{filteredStudent.age}</td>
</tr>
))}
The complete React component code:
import React from 'react';
const students = [
{
'id': 1,
'name': 'Obydul',
'age': 25
},
{
'id': 2,
'name': 'Kabir',
'age': 24
},
{
'id': 3,
'name': 'Hussain',
'age': 30
},
{
'id': 4,
'name': 'Kamrul',
'age': 35
},
];
function App() {
return (
<div>
<table className="table table-bordered">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
{students.filter(student => student.age < 30).map(filteredStudent => (
<tr>
<td>{filteredStudent.id}</td>
<td>{filteredStudent.name}</td>
<td>{filteredStudent.age}</td>
</tr>
))}
</table>
</div>
);
}
export default App;
That’s it. Thanks for reading. ?
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)