Different Ways To Render a List of Items in React

In React, when we are working with dynamic data, it is common to render a list of items. In React, there are several methods to render the list efficiently.

1. Using Array.map()

Array.map() is a built-in JavaScript function provided by JavaScript. It iterates over the list of items in the array and returns a list of React components

• map() function is called over the array, and a callback function is accepted as an argument
• callback function will take the item and index as arguments
• index should be used as a key for the item

To start the application run the following command.

npm start

Output

2. Using for loop

for loop is a control flow statement in JavaScript. It is used to iterate over the items in a array. In this iterator or loop variable will be used to access the array elements.

Output

3. Using Array.forEach()

• forEach() function takes a callback function as an argument
• That callback function will be executed for each array item
• callback function takes item and index as argument.

Output

4. Using React.Children.map()

1. It is a utility function in React
2. It is used to iterate over the child component
3. It takes a callback function as an argument
4. The callback functions takes child and index as arguments to iterate over the child components and modify it

Output

5. Using map() and JSX Spread Attributes

• This method is used to render the components with dynamic props
• In the callback function while rendering the components props will be passed to it
• The callback function take item and index as the argument

Output: