In React, when using map() to loop through an array of elements, does the result need to only be displayed using the <ul> and <li> tags?

Question

I'm using the map() method to loop through the numbers array in order to display the double of each of its element.

When I display the result using the <ul> and the <li> tags, the code works fine as below:

 function NumberList(props) { const numbers3 = props.numbers2; const listItems = numbers3.map((e) => <li key={e.toString()} >{e*2}</li>); return ( <div> <h1>Hello</h1> <p>The result is</p> <ul>{listItems}</ul> </div> ); } const numbers1 = [1, 2, 3, 4, 5]; ReactDOM.render(<NumberList numbers2={numbers1}/>, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

But when I try to display without the tags, it won't display as below:

 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((e) => {e*2}); return ( <div> <h1>Hello</h1> <p>The result is</p> {listItems} </div> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(<NumberList numbers={numbers}/>, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

So my question is this: when using the map() method in React to loop through an array, do we have to display the result in a list format using the <ul> and the <li> tags? What am I doing wrong?

Thanks

Answer 1

Actually you can do exactly what you're trying to do. Map returns an array, and it's perfectly valid to try and print the array directly as you're doing. You can do that with any object that implements toString() . You just need to remove the {} around your e*2 . See below:

 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((e) => e*2); return ( <div> <h1>Hello</h1> <p>The result is</p> {listItems} </div> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(<NumberList numbers={numbers}/>, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 2

It doesn't need those tags specifically, but you do need to wrap it in something. Like a span or p tag. See below example.

 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((e) => <span key={e.toString()}>{e*2}</span>); return ( <div> <h1>Hello</h1> <p>The result is</p> {listItems} </div> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(<NumberList numbers={numbers}/>, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>