How do I make each of them a unique Key?

[samancla]

Tell us what’s happening:
I know how to get the tests to pass. What I don’t understand is how to give it a unique key by the map function alone. Could someone explain that to me? I know the index will act like a key ( or is a key?).

  **Your code so far**

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

function Frameworks() {
const renderFrameworks = frontEndFrameworks.map(key => <li>{key}</li>); // Change this line
return (
  <div>
    <h1>Popular Front End JavaScript Frameworks</h1>
    <ul>
      {renderFrameworks}
    </ul>
  </div>
);
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0

Challenge: Give Sibling Elements a Unique Key Attribute

Link to the challenge:

freeCodeCamp.org

[hanny]

Hello,
you can pass the key to li element same way as any other attribute
I do not want to show you the solution, so just a hint: same as src attribute to img attribute <img src={something} /> you can do the same for li and instead of src set the key.
you can find more info in the docs: https://reactjs.org/docs/lists-and-keys.html#keys