React keys are useful when working with dynamically created components or when your lists are altered by the users. Setting the key value will keep your components uniquely identified after the change.<\/p>\n
Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it:<\/p>\n
const numbers = [1, 2, 3, 4, 5];<\/p>\n
const doubled = numbers.map((number) => number * 2);<\/p>\n
console.log(doubled);<\/p>\n
This code logs [2, 4, 6, 8, 10] to the console. In React, transforming arrays into lists of elements is nearly identical.<\/p>\n
Rendering Multiple Components<\/strong><\/p>\n You can build collections of elements and include them in JSX using curly braces {}. Below, we loop through the numbers array using the JavaScript map() function. We return a <li> element for each item. Finally, we assign the resulting array of elements to listItems:<\/p>\n const numbers = [1, 2, 3, 4, 5];<\/p>\n const listItems = numbers.map((number) =><\/p>\n <li>{number}<\/li><\/p>\n );<\/p>\n We include the entire listItems array inside a <ul> element, and render it to the DOM:<\/p>\n ReactDOM.render(<\/p>\n <ul>{listItems}<\/ul>,<\/p>\n document.getElementById(‘root’)<\/p>\n );<\/p>\n This code displays a bullet list of numbers between 1 and 5.<\/p>\n","protected":false},"excerpt":{"rendered":" React keys are useful when working with dynamically created components or when your lists are altered by the users. Setting the key value will keep your components uniquely identified after the change. Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new…<\/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":[8610],"class_list":["post-74412","page","type-page","status-publish","hentry","category-reactjs","tag-reactjs-keys"],"acf":[],"yoast_head":"\n