November 16, 2021 04:01 pm GMT
Original Link: https://dev.to/rthefounding/react-giving-elements-a-unique-key-attribute-573f
React: Giving Elements a Unique Key Attribute
- Remember when you create an array of elements, each one needs a
key
attribute set to a unique value. React uses these keys to keep track of which items are added, changed, or removed. This helps make the re-rendering process more efficient when the list is modified in any way. - Code:
const frontEndFrameworks = [ 'React', 'Angular', 'Ember', 'Knockout', 'Backbone', 'Vue'];function Frameworks() { const renderFrameworks = null; // Change this line return ( <div> <h1>Popular Front End JavaScript Frameworks</h1> <ul> {renderFrameworks} </ul> </div> );};
Here FreeCodeCamp wants us to map the array
Frameworks()
to an unordered list, much like in the last challenge. Let's finish writing themap
callback to return an li element for each framework in thefrontEndFrameworks
array.Answer:
function Frameworks() { const renderFrameworks = frontEndFrameworks.map(l => <li key = {l}>{l}</li>);
Note:
- Keys only need to be unique between sibling elements, they don't need to be globally unique in your application.
Original Link: https://dev.to/rthefounding/react-giving-elements-a-unique-key-attribute-573f
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To