Exercise 14. Keys - hangs when i Run


#1


Exercise 14


Hangs (circle) when i click Run. From the prev post in the Forum, am using the line:


return <li key={"person_" + i}> {person}</li>;


#2

Doesn't hang for me but neither does it (but should) show the unordered list to/on the right when I click on [Run].

Here's my entire app.js:

var React = require('react');
var ReactDOM = require('react-dom');

var people = ['Rowe', 'Prevost', 'Gare'];

var peopleLIs = people.map(function(person, i) {
  // return statement goes here:
return <li key={'person_' + i}>{person}</li>;
});

// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLIs}</ul>, document.getElementById('app'));

Replacing the apostrophes in Line # 8 with double quotes doesn't work either:

return <li key={"person_" + i}>{person}</li>;

nor does:

return <li key={'person-' + i}>{person}</li>;

nor does:

return <li key={"person-" + i}>{person}</li>;

Problem occurs both in Chrome as well as I.E. as well as Firefox for me.

The plot thickens; the above code works fine in "13. .map in JSX" but not in "14. Keys" ...


#3

@abergquist - I'm in the same boat - still spinning as I type. So i'm still working on how to repair my code.

One thing you might try is removing the semi-colon at the end of your

  • in Line 8.

    I think that the the ; at the end of Line 9 is the only one needed.

    Good Luck.


  • #4

    @abergquist Yikes! - I tested Line 8 with a ; and it runs! Sorry about my previous post.

    Here's a snippet of my code:

    var peopleLIs = people.map(function(person, i){
      // return statement goes here:
    return <li key={'person_' + i}>{person}</li>;
    });

    #5

    Yes; since it's JavaScript, the semicolon at the end of the line should work fine.

    Very strange; here's my latest code

    var React = require('react');
    var ReactDOM = require('react-dom');
    
    var people = ['Rowe', 'Prevost', 'Gare'];
    
    var peopleLIs = people.map(function(person, i) {
      // return statement goes here:
      return <li key={'person_' + i}>{person}</li>;
    });
    
    // ReactDOM.render goes here:
    ReactDOM.render(<ul>{peopleLIs}</ul>, document.getElementById('app'));

    It still doesn't show anything (a browser with the results) when I [Run] Exercise 14 whereas other exercises display a browser on the right with the results.


    #6

    Same here the console just hangs. Been suck on lesson 14 for about 30 mins.


    #7

    Same if you try other browsers, too?


    #8

    Honestly I only tried it on Chrome. I only use one Browser despite the fact that I'm a professional web developer. Anyhow, it seems to be random. Not 2 minutes after I posted this message it began working again.


    #10

    Yes, I also got stuck :frowning:


    #11

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