Usually you would render lists inside a component.<\/p>\n
We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.<\/p>\n
function NumberList(props) {<\/p>\n
const numbers = props.numbers;<\/p>\n
const listItems = numbers.map((number) =><\/p>\n
<li>{number}<\/li><\/p>\n
);<\/p>\n
return (<\/p>\n
<ul>{listItems}<\/ul><\/p>\n
);<\/p>\n
}<\/p>\n
const numbers = [1, 2, 3, 4, 5];<\/p>\n
ReactDOM.render(<\/p>\n
<NumberList numbers={numbers} \/>,<\/p>\n
document.getElementById(‘root’)<\/p>\n
);<\/p>\n
When you run this code, you\u2019ll be given a warning that a key should be provided for list items. A \u201ckey\u201d is a special string attribute you need to include when creating lists of elements. We\u2019ll discuss why it\u2019s important in the next section.<\/p>\n
Let\u2019s assign a key to our list items inside numbers.map() and fix the missing key issue.<\/p>\n
function NumberList(props) {<\/p>\n
const numbers = props.numbers;<\/p>\n
const listItems = numbers.map((number) =><\/p>\n
<li key={number.toString()}><\/p>\n
{number}<\/p>\n
<\/li><\/p>\n
);<\/p>\n
return (<\/p>\n
<ul>{listItems}<\/ul><\/p>\n
);<\/p>\n
}<\/p>\n
const numbers = [1, 2, 3, 4, 5];<\/p>\n
ReactDOM.render(<\/p>\n
<NumberList numbers={numbers} \/>,<\/p>\n
document.getElementById(‘root’)<\/p>\n
);<\/p>\n","protected":false},"excerpt":{"rendered":"
Usually you would render lists inside a component. We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements. function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}<\/li> ); return ( <ul>{listItems}<\/ul> ); } const numbers = [1, 2, 3, 4,…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8611],"class_list":["post-74414","page","type-page","status-publish","hentry","category-reactjs","tag-list-component"],"acf":[],"yoast_head":"\n