Part 14 / 16 syntax error


#1


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


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}</li>;
});

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


#2

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


#3

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


#4

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.


#5

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.


#6

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


#7

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


#8

Yes that worked for me

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

It took so long tho, they should fix the bug


#9

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