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


#1


Not particularly stuck at exercise 14, but have an alternate answer and want to know why it doesn't work.


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 <li key="person_{i}">{person}</li>;**
    });
    
    ReactDOM.render(<ul>{peopleLIs}</ul>, document.getElementById('app'));


  • #2

    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].


    #3

    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?


    #4

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


    #5

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