[SOLVED BUT EXPLANATION NEEDED] Give Sibling Elements a Unique Key Attribute

JavaScript
1

Can anyone explain how these two differ from each other in simple words?
In the frameworks function, the two commented lines are the different solutions to this challenge

Your code so far



const frontEndFrameworks = [
  'React',
  'Angular',
  'Ember',
  'Knockout',
  'Backbone',
  'Vue'
];

function Frameworks() {
 /* const renderFrameworks = frontEndFrameworks.map((item, index) => {return <li key={index}>{item}</li>}); */
 /* const renderFrameworks = frontEndFrameworks.map((renderFrameworks) => <li key={renderFrameworks.toString()}>{renderFrameworks}</li>); */
  
  return (
    <div>
      <h1>Popular Front End JavaScript Frameworks</h1>
      <ul>
        {renderFrameworks}
      </ul>
    </div>
  );
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/give-sibling-elements-a-unique-key-attribute/

2

In first are keys 0,1,2,3,4
and in second ‘React’, ‘Angular’, ‘Ember’, ‘Knockout’, ‘Backbone’, ‘Vue’

1 Like
3

@lubodrinka thanks buddy but can you brief a little?

4

Array.map callback function does take as first parameter the current element of the array you are iterating over in your case ‘item’ and second one is the ‘index’ for each element. 0 ,1… up to the length of the array.

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

In consequences

const renderFrameworks = frontEndFrameworks.map((item, index) => {return <li key={index}>{item}</li>});

This time map gets every ‘item’= ‘React’, ‘Angular’, ‘Ember’… from frontEndFrameworks array and each ‘index’ = 0,1,2 … and does return an jsx

<li key = 0> 'React' </li>

element, for each iteration, with key attribute and uses jsx assigning style for each index until the array is exhausted.
First li element has key= 0 …second li element has key = 1 and so on … you can guess what is returned here for {item} .

If you want to properly undestand check this:

5

[quote=“IAmRC1, post:1, topic:216100”]```
[/quote]
it is the same map function
only in first it is assign to key the index as uniqe key and in seconds is string from array

1.  const renderFrameworks = frontEndFrameworks.map((item, index) => {return <li key=**{index}**>
{item}</li>});
2.  const renderFrameworks = frontEndFrameworks.map((item, index) => {return <li key=**{item}**>
 {item}</li>});