What are the differences between map and forEach in React?

What are the differences between map and forEach in React?

In React, both map and forEach are used to iterate over arrays, but they serve different purposes. map returns a new array, while forEach does not.

Can you give me an example of how to use map in a React component?

Sure! Here's a simple example:

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

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

What about forEach? How would that look?

ForEach is typically used for side effects. Here's an example:

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

const ItemList = () => {
  const listItems = [];
  items.forEach(item => listItems.push(<li key={item}>{item}</li>));

  return <ul>{listItems}</ul>;
};

So, should I always use map instead of forEach in React?

Not necessarily. Use map when you need to transform data into a new array, and forEach when you just want to perform an action without needing a new array.