Give Sibling Elements a Unique Key Attribute bug?

JavaScript
1

It seems to be rendering just fine, I also tried

const renderFrameworks = frontEndFrameworks.map( (element) => <li key={element.toString()}> {element} </li>);

keeps giving me :

Each list item element should contain text from frontEndFrameworks

  **Your code so far**


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

function Frameworks() {
const renderFrameworks = frontEndFrameworks.map( (element) => <li key={element}> {element} </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/91.0.4472.124 Safari/537.36

Challenge: Give Sibling Elements a Unique Key Attribute

Link to the challenge:

2

Your key is fine. The problem is the rendered output:

<li key={element}> {element} </li>

You’ve added a space on each side of the {element} which adds spaces there in the output which cause the output not to be correct.

When I remove those spaces, the code passes for me.

3

<:O , that makes sense , I didnt realize the output would be that specific, thank you ill be more careful next time.

4

Yeah, it’s a good idea to be conscious of that. You don’t want to be on the job and have the UI team reject your work because you are adding and missing spaces.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.