React ES6 Array Methods

JavaScript provides several powerful array methods that can be extremely useful in React. Three of the most commonly used methods are map(), filter(), and reduce(). Understanding how to use these methods will help you write more efficient and readable code when working with arrays in React.



1. map()

The map() method creates a new array by applying a function to each element in the original array. It is often used in React to generate lists dynamically.

Example

In this example, the map() method iterates over each item in the fruits array and returns a new array of <p> elements, each containing one fruit.

const fruits = ['apple', 'banana', 'orange'];

const fruitList = fruits.map((fruit) => <p>{fruit}</p>);




2. filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function. This method is useful for filtering data based on specific conditions.

Example

In this example, filter() returns a new array containing only the even numbers from the original numbers array.

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((number) => number % 2 === 0);




3. reduce()

The reduce() method executes a reducer function on each element of the array, accumulating the result into a single output value. It is useful for performing aggregation operations such as sums or averages.

Example

In this example, reduce() calculates the sum of all the numbers in the array, starting from an initial value of 0.

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce((sum, number) => sum + number, 0);

Scroll to Top