javascript

reactjs map() unordered list

Bodo Coder

— 1 min read

ReactJS Map() Unordered List

If you are working with ReactJS, you may need to display a list of items on a webpage. The map() function is an easy and efficient way to accomplish this task. Here is how to use map() to create an unordered list in ReactJS:

Step 1: Define the List

First, define an array of items that you want to display. For example, let's say we want to display a list of fruits:

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

Step 2: Use map() to Create the List Items

Next, use the map() function to create an array of list items. In this case, we will create a <li> element for each fruit in the array:

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

The map() function loops through each item in the array and returns a new array of list items. Each list item is wrapped in a <li> element and contains the text of the fruit.

Step 3: Render the List

Finally, render the list by wrapping the array of list items in an unordered list (<ul>) element:

return (
  <ul>
    {fruitList}
  </ul>
);

The curly braces ({}) indicate that we are using a JavaScript expression inside the JSX. This expression evaluates to the array of <li> elements created by the map() function.

Alternative Method: Using JSX Spread Operator

Alternatively, you can use the JSX spread operator to insert the array of list items directly into the unordered list element:

return (
  <ul>
    {...fruitList}
  </ul>
);

This method avoids the need for an intermediate array variable (fruitList) and can be slightly more efficient.

Read more