Exercise 14. Keys - hangs when i Run

<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.>
Exercise 14

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
Hangs (circle) when i click Run. From the prev post in the Forum, am using the line:

``` return
  • {person}
  • ;
    <do not remove the three backticks above>

    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” …

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

  • @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>;
    });
    

    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.

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

    Same if you try other browsers, too?

    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.

    Yes, I also got stuck :frowning:

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