How do I use map, filter, and forEach in React?

Can you explain how to use map, filter, and forEach in React?

Sure! In React, you can use map to iterate over arrays and render components. Filter is used to create a new array with elements that pass a test, and forEach is used to execute a function on each element without returning a new array.

Can you give me an example of using map in a React component?

Absolutely! Here's a simple example:

const items = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

This will render a list of fruits.

What about using filter? Can you show me that?

Sure! Here's how you can use filter:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

function EvenNumberList() {
  return (
    <ul>
      {evenNumbers.map(num => <li key={num}>{num}</li>)}
    </ul>
  );
}

This will render a list of even numbers.

And forEach? How does that work?

forEach is used for executing a function on each element of an array. However, it doesn't return a new array. Here's an example:

const fruits = ['Apple', 'Banana', 'Cherry'];

fruits.forEach(fruit => console.log(fruit));

This will log each fruit to the console.