Give Sibling Elements a Unique Key Attribute bug?

It seems to be rendering just fine, I also tried

const renderFrameworks = (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 = [

function Frameworks() {
const renderFrameworks = (element) => <li key={element}> {element} </li>);

return (
    <h1>Popular Front End JavaScript Frameworks</h1>
  **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:

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.

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

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.

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