How to Use Map, Filter, and Reduce in React

Map, Filter, and Reduce are the most used array functions. Each of them iterates over the array, performs some operations, and returns the new array with the updated results. In this article, we will discuss how we can use these map, filter and reduce in React to iterate over the array.

What is Map() Function?

The Map method is used to generate a new array from an existing one. By calling the callback function on each element of the existing array and returning the new array’s modified values.

Syntax

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

What is Filter() Function?

The Filter method applies the given test condition to each element in the array. The element is pushed into the output array if the condition returns true, and out of the output array if the condition returns false.

Syntax

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

What is Reduce() Function?

The Reduce method, as the name implies, reduces the value of an array to a single value by applying the reduce function to each element of the array.

Syntax

arr.reduce(callback[, initialValue])

Let’s take a look at some important concepts of React before getting into the details of how to render the array using the aforesaid functions.

What is a Props in React?

Props are objects that store the value of a tag’s attributes. They act as a medium for passing the unique value from one component to another. They’re a shortened version of properties, and they’re passed in the same manner as arguments are in a function.

const name = "ABC";
const language = "JavaScript";
const job = "Developer";
function LangData(){
     return(
            <section>
            <Data name = {name} language = {language} job = "developer" />
            </section>
            );
};
function Data(props){
     return(
            <article>
            <h2> {props.name} </h2>
            <h3> {props.language} </h3>
            <h3> {props.job} </h3>
            </article>
            );
};

Props Destructuring 

In the previous example, calling props.name, props.language, and props.job repeatedly makes your code cluttered and untidy. It will become easier and tidy if you use the notion of destructuring the objects. In JavaScript, you can destructure the object directly inside the function body or in the function parameter.

We can destructure our props in 2 alternate ways:

1. By using a default behavior of the Destructuring we can extract the values of the props into the newly created object and in this way we can also define default values to the properties.

function Data(props){
     const {name, langauge, job} = props;
     return(
            <article>
            <h2> {name} </h2>
            <h3> {language} </h3>
            <h3> {job} </h3>
            <article>
            );
};

2. By destructuring the object in the parameters. In this way, the props get automatically destructed when passed.

function Data({name, language, job}){
     return(
            <article>
            <h2> {name} </h2>
            <h3> {language} </h3>
            <h3> {job} </h3>
            <article>
            );
};

Now let’s take a look at how to iterate over an array using map, filter and reduce in React.

How to Render an Array of Strings in React

In this example we are creating an array of the string which we will render using the map function.

import React from "react";
import ReactDom from "react-dom";

const names = ["john", "peter", "susan"];

const newNames = names.map((element) => {
  return <li>{element}</li>;
});

function NameList() {
  return <div>{newNames}</div>;
}

ReactDom.render(<NameList />, document.getElementById("root"));

Let’s inspect the code above.

First, we used the hard-coded array of strings then we created a new array followed by specifying the array (names) on which we want to perform the map function. As we are performing the function we open up a set of parentheses and inside this we pass the element. Finally at last we return the element.

How to Render an Array of Object in React

In this example we are creating an array of the string which we will render using the map function.

import React from "react";
import ReactDom from "react-dom";

const names = [
  {
    name: "John",
    age: "31",
  },
  {
    name: "Peter",
    age: "25",
  },
  {
    name: "Susan",
    age: "40",
  },
];

function NameList() {
  return (
    <section>
      {names.map((element) => {
        return <Name key11={element}></Name>;
      })}
    </section>
  );
}
const Name = (props) => {
  const { name, age } = props.key11; //Props Destructuring
  return (
    <article>
      <h2>{name}</h2>
      <h2>{age}</h2>
    </article>
  );
};

ReactDom.render(<NameList />, document.getElementById("root"));

Let’s inspect the code above.

First, we used the hard-coded array of object then we created a NameList component enclosed inside the HTML <section /> tag. Where we specified the array (names) on which we want to perform the map function. As we are performing the function we open up a set of parentheses and inside this we pass the element. Now we made a Name component where we are rendering our props (name and age).

In our next article we will cover rest two functions filter and reduce. Also did you find this article helpful? Let us know in the comment section below.