Breaking News: Grepper is joining You.com. Read the official announcement!

How to create list of JSX elements using .map()

M Hassan khan answered on June 11, 2022 Popularity 8/10 Helpfulness 4/10

answer How to create list of JSX elements using .map()

How to create list of JSX elements using .map()

Comment


/* 
	If you want to create a list of JSX elements, then .map() is often your best bet.
*/
const strings = ['Home', 'Shop', 'About Me'];
 
const listItems = strings.map(string => <li>{string}</li>);
 
<ul>{listItems}</ul>

/*                             
In the above example, we start out with an array of strings. We call .map()
on this array of strings, and the .map() call returns a new array of <li>s.

On the last line of the example, note that {listItems} will evaluate to an array,
because it’s the returned value of .map()! 
JSX <li>s don’t have to be in an array like this, but they can be.
*/
                              
// This is fine in JSX, not in an explicit array:
 
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
 
// This is also fine!
 
const liArray = [
  <li>item 1</li>, 
  <li>item 2</li>, 
  <li>item 3</li>
];
 
<ul>{liArray}</ul>

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: elements javascript jsx list using

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

M Hassan khan

0 Answers Avg Quality 2/10

How to create list of JSX elements using .map()

Contents

More Related Answers

How to create list of JSX elements using .map()

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.