Неожиданный возврат токена в функции рендеринга. Реагировать на родной

Получение «Неожиданного токена» при возврате в рендере

render() {
   return (

Не могу понять, почему это происходит. У меня фигурные скобки в функции внутри рендера?!

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