Frontend employee Frontend employee - 2 months ago 20
Javascript Question

Unexpected character '⇒' React.js

As a newbie to React.js I am playing around with some React.js code and I like it very much, but do not understand why I get some error on the follow syntax --> {this.state.data.map((person, i) ⇒ )}. According to an online tutorial this should work, so that makes me confusing. If I remove the EcmaScript 2015 arrow syntax (⇒) I will get another error in this syntax..



import React from 'react';

class App extends React.Component {
constructor() {
super();

this.state = {
data:
[
{
"id": 1,
"name": "Foo",
"age": "12"
},
{
"id": 2,
"name": "Bar",
"age": "30"
},
{
"id": 3,
"name": "Baz",
"age": "40"
}
]
}
}

render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) ⇒ <TableRow key = {i} data = {person} />)}
</tbody>
</table>
</div>
)
}
}

class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
)
}
}

class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>




Answer

Actually you should use => this operator, not the symbol. It's a equal sign and a greater than sign.

The code was likely formatted when published, but instead it's =>!