Give Sibling Elements a Unique Key Attribute with key attribute

Help me please, i can’t render li , but and li tag haven’t key attribute, how should view code?


* 1. const frontEndFrameworks = [
* 2.   'React',
* 3.   'Angular',
* 4.   'Ember',
* 5.   'Knockout',
* 6.   'Backbone',
* 7.   'Vue'
* 8. ];

* 9. function Frameworks() {
* 10.   const renderFrameworks = frontEndFrameworks.map((item, index) => {
* 11.     <li key={index}>{item}</li>
* 12.   }); // change code here
* 13.   return (
* 14.     <div>
* 15.       <h1>Popular Front End JavaScript Frameworks</h1>
* 16.       <ul>
* 17.         {renderFrameworks}
* 18.       </ul>
* 19.     </div>
* 20.   );
* 21. };

Blockquote


**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36</code>.

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

Is just a syntax problem ^^
When you put the curly braces you should use the return statement but if you want to return the result immediately you can just use normal parenthesis.

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

Remove the curly braces and the code will pass the tests^^
EDIT:
I mean the external ones.

1 Like

Thank you Friend, i add curly braces

1 Like