Getting "Unexpected token" on return in render
render() {
return (
Cannot understand why this is happening. I have curly braces in the function inside render ?!
export class NoteList extends React.Component {
constructor(props) {
super(props);
state = {cnt: 0}
}
componentDidMount() {
this.state.cnt = 0;
}
appendNoteToDiagram = (note, index) => {
this.state.cnt++;
let xpos = this.state.cnt;
let ypos = this.state.cnt * 60;
return (<Note x-position="{xpos}" y-position="{ypos}" width="100"
height="50" stroke-color="red" fill-color="red" text="
{note.text}">);
}
render() {
return ( // <<<<<< Error Here
{ this.props.notes.map((note, index) => (
return appendNoteToDiagram(note, index)
))}
);
}
}
Put this JSX inside div.
<div>
{ this.props.notes.map((note, index) => (
return appendNoteToDiagram(note, index)
))}
</div>
You're using (
instead of {
, which doesn't make sense because you're calling a function. Ideally, because of appendNoteToDiagram
function signature, I'd change this:
return (
{ this.props.notes.map((note, index) => (
return appendNoteToDiagram(note, index)
))}
);
To this:
return (<>{this.props.notes.map(appendNoteToDiagram))}</>)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.