Render函数中意外的令牌返回。 反应本机

Question

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

Answer 1

Put this JSX inside div.

<div>
{ this.props.notes.map((note, index) => (
       return appendNoteToDiagram(note, index)
   ))}
</div>

Answer 2

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