Reactjs Code as jsFiddle Has Syntax Errors
There Is Something About jsFiddle an React That I Don't Understand. Based on My Best Guess I Have a Component Defined as Class Makeworkers Extends React...
There is something about jsFiddle an React that I don't understand. Based on my best guess I have a component defined as
class MakeWorkers extends React.Component {
render() {
return (<ul>this.props.people.map((person) => {
const { name, whatCanDo } = person;
return (<li key={name}>My name is {name}, I can do {whatCanDo}</li>);
})</ul>);
}
}
const people = [
{ name: 'Josh', whatCanDo: 'painting' },
{ name: 'Lay', whatCanDo: 'security' },
{ name: 'Ralph', whatCanDo: 'cleaning' }
];
ReactDOM.render(
<MakeWorkers people={people}/>,
document.getElementById('container')
);
This seems like valid JSX syntax to me but when I put it into a Fiddle in jsFiddle it doesn't work and there are a number of syntax errors in the render function. I am not sure what I am missing in getting this simple example of mapping and JSX working in jsFiddle. One of the main error messages is that jsFiddle claims there is an unterminated regular expression. Something is very confused. Maybe I am not including the right libraries? The full Fiddle is Here
2 Answers
It seems you forgot to wrap the content inside <ul> with {}. You can find the edited code here:
The editor complains the same thing. Even the boilerplate code has the same syntax error. So I bed it's a bug.
Not valid JSX, this is valid:
class MakeWorkers extends React.Component {
render() {
return (
<ul>
{this.props.people.map(person => {
const { name, whatCanDo } = person;
return (
<li key={name}>
My name is {name}, I can do {whatCanDo}
</li>
);
})}
</ul>
);
}
}
this.props.people.map is javascript expression need to be inside {}
you can found more doc here
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
