Part 14 / 16 syntax error

<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.>
https://www.codecademy.com/en/courses/react-101/lessons/react-jsx-advanced/exercises/jsx-keys?action=resume

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
They said “+” is syntax error. What is my fault ? They wanna set “key” attributes but it didn’t work.

```

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

var people = [‘Rowe’, ‘Prevost’, ‘Gare’];

var peopleLIs = people.map(function(person, i){
return <li key=“person_” + {i} >{person};
});

ReactDOM.render(

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

Dude, i have the same error at the console. Did you fix it?

Unfortunately not yet. I couldn’t fix it. I think there is a bug. I’m reported.

Dude there is a bug but i could skip this chapter. you should dont write anything and click run 3-4 times. helping page will come on screen. Click “get code” and click next.

The suggested code doesn’t work, no matter what I try.

This is what they want -

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

But this throws an error.

After several times, when I click “Get Code”, this appears as their solution -

	return <li>{person}</li>;

And there’s no key in here.

I spoke to some people who know React, and they say you can’t use + like this. The right way is -

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

Here is my codepen Demo that demonstrates this.

Codeacademy, please fix this.

Looks like there is a bug on this page. I have reported it.

Thanks! i did the trick and now i can continue the tutorial. Thanks again!

Yes that worked for me

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

It took so long tho, they should fix the bug

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