React — Syntax error: Unexpected token, expected ;

Question

For some reason that I can't figure it out I am getting a syntax error in the following React component. The error is in the first curly bracket on the renderItem(). What's wrong?

Thank you in advance.

import _ from 'lodash';
import React from 'react';
import { ToDoListHeader } from './todo-list-header';
import { ToDoListItem } from './todo-list-item';

export const ToDoList = (props) => {
  renderItems() {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

  return (
    <div>
      <table>
        <ToDoListHeader />
        <tbody>
          {/* {this.renderItems()} */}
        </tbody>
      </table>
    </div>
  );
}

kind user · Accepted Answer · 2020-05-29 14:47:34Z

7

Well, you are getting error because you are defining the function like in a class, not in a function. Use a proper function declaration.

export const ToDoList = (props) => {
  const renderItems = () => {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

  return (
    <div>
      <table>
        <ToDoListHeader />
        <tbody>
          {/* {this.renderItems()} */}
        </tbody>
      </table>
    </div>
  );
}

It would work fine, if only ToDoList was a class, though.

edited May 29, 2020 at 14:47

answered Jul 24, 2017 at 11:36

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Starusiev · Accepted Answer · 2017-07-24 11:36:11Z

1

  renderItems = () => {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

Your varian will work with es6 classes.

answered Jul 24, 2017 at 11:36

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

Collectives™ on Stack Overflow

React — Syntax error: Unexpected token, expected ;

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related