14/16 - Why doesn't this code work?

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
Not particularly stuck at exercise 14, but have an alternate answer and want to know why it doesn’t work.

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
Error message I get when using alt code: “Give your

  • an attribute with a name of key and a value of {“person_” + i}.” ```

    var React = require(‘react’);
    var ReactDOM = require(‘react-dom’);

    var people = [‘Rowe’, ‘Prevost’, ‘Gare’];
    var i = 0;
    var peopleLIs = people.map(function(person,i){
    return

  • {person}
  • ;
    });

    ReactDOM.render(

      {peopleLIs}
    , document.getElementById(‘app’));
    <do not remove the three backticks above>

    https://www.codecademy.com/en/courses/react-101/lessons/react-jsx-advanced/exercises/jsx-keys

    In this attribute value, person_ is literal, when it should be included in the expression, as shown in the error message.

    key={'person_'+i}
    

    The underscore tells React that the person variable in the rendered expression is person[i].

    Won’t the key attribute still get the appended value if i just reference the expression equal to ‘person_{i}’? It’s simply printing it after all.
    Can I concatenate the two together in any other way?

    Must there be another way? What is wrong with the way that Facebook wrote it?

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