javascript - React — Syntax error: Unexpected token, expected ; - Stack Overflow

admin管理员组

文章数量:1393889

For some reason that I can't figure it out I am getting a syntax error in the following React ponent. 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>
  );
}

For some reason that I can't figure it out I am getting a syntax error in the following React ponent. 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>
  );
}

• javascript
• reactjs
• syntax-error
• ponents

Share Improve this question Follow edited Jul 25, 2017 at 9:10 kind user 41.9k88 gold badges6868 silver badges7878 bronze badges asked Jul 24, 2017 at 11:33 Diego OrianiDiego Oriani 1,89755 gold badges2323 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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

Your varian will work with es6 classes.

本文标签： javascriptReactSyntax error Unexpected tokenexpected Stack Overflow