Give Sibling Elements a Unique Key Attribute

Tell us what’s happening:

Something is wrong with this code, there is no class and there is no rendering method.

I apply the following code to map the array but the code is not validated.
Your code so far




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

function Frameworks() {
  const renderFrameworks = this.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 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36.

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

const renderFrameworks = this.frontEndFrameworks.map...

Remember that each function creates its own this, so when you use this in this expression, it is looking for frontEndFrameworks in this function and can’t find it. Remove the this and it should work.

Thanks obviously I am very tired.

2 Likes