How to Filter Arrays in React

Published on July 27, 2020 1 min read

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

  1. Filter Single Array
  2. Filter Multidimensional Array

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:

App.js
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:

App.js
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. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Follow Buy me a coffeeBuy me a coffee

Leave a Reply

Your email address will not be published. Required fields are marked *