React ES6 Arrow in Map Throws Syntax Error

Question

I have a React project that was built using the React Ui-Material Admin Template. It comes bundled with webpack and some additional features, but for some reason, it throws errors when using arrow functions while trying to map an array. I use arrow functions in other models within the project and it works fine. It just seems to be when trying to map within my components.

I have tried looking into the order of things within my webpack config file, researched, and tried additions that other people found fixes for it within my babelrc and eslintrc files, but at this point, I could use a fresh pair of eyes, as nothing has worked.

Here are my files. I'll post everything I can just to be thorough.

Error in console:

ERROR in ./src/containers/CrimeWatch.js Module build failed: SyntaxError: Unexpected token, expected : (79:90)

My component throwing the error:

import React, { PropTypes } from 'react';
import { observer, inject } from 'mobx-react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';

@inject('crimeModel')
@observer
class CrimeWatch extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 1,
      crimes: [],
      defaultLat: 30.4583,
      defaultLng: -91.1403,
      zoom: 12
    };
  }

  handleChange = (event, index, value) => {
    this.setState({value});
  }

  render() {

    const AnyReactComponent = ({ text }) => <div>{text}</div>;

    const styles = {
      button: {
        margin: 12,
      },
    };

    return(
      <div className="page-containers crimewatch">
        <DropDownMenu value={this.state.value} onChange={this.handleChange}>
          <MenuItem value={1} primaryText="Select a crime type" />
          <MenuItem value={"ASSAULT"} primaryText="Assault" />
          <MenuItem value={"BATTERY"} primaryText="Battery" />
          <MenuItem value={"CRIMINAL DAMAGE TO PROPERTY"} primaryText="Criminal Damage to Property" />
          <MenuItem value={"FIREARM"} primaryText="Firearm" />
          <MenuItem value={"HOMICIDE"} primaryText="Homicide" />
          <MenuItem value={"INDIVIDUAL ROBBERY"} primaryText="Individual Robbery" />
          <MenuItem value={"NARCOTICS"} primaryText="Narcotics" />
          <MenuItem value={"RESIDENTIAL BURGLARY"} primaryText="Residential Burglary" />
          <MenuItem value={"THEFT"} primaryText="Theft" />
          <MenuItem value={"VEHICLE BURGLARY"} primaryText="Vehicle Burglary" />
          <MenuItem value={"VICE"} primaryText="Vice" />
          <MenuItem value={"OTHER"} primaryText="Other" />
        </DropDownMenu>
        <br/>
        <RaisedButton
          label="Search"
          primary={true}
          style={styles.button}
          onClick={() => this.props.crimeModel._fetchCrime(this.state.value)}
        />
        <br/>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Address</TableHeaderColumn>
              <TableHeaderColumn>Status</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
          {this.props.crimeModel.crimes ? this.props.crimeModel.crimes.map((data, index)) => (
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn>{data.a_c}</TableRowColumn>
            </TableRow>
          ) : "Testing" }
          </TableBody>
        </Table>
      </div>
    )
  }
}

export default CrimeWatch;

The arrow in the map part for the TableBody is what is throwing the error.

package.json:

{
  "name": "react-material-admin-template",
  "version": "0.0.1",
  "description": "Admin template using React and Material-UI",
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "start": "npm-run-all --parallel test:watch open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "npm run test -- --watch",
    "open:cover": "npm run test:cover && open coverage/index.html"
  },
  "author": "Rafael Zeffa",
  "license": "MIT",
  "dependencies": {
    "babel-eslint": "8.0.3",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "flexboxgrid": "6.3.1",
    "font-awesome": "4.7.0",
    "google-map-react": "0.25.0",
    "history": "4.5.1",
    "lodash": "4.17.4",
    "material-ui": "0.17.0",
    "mobx": "3.4.1",
    "mobx-react": "4.3.5",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-icons": "2.2.7",
    "react-router": "3.0.2",
    "react-tap-event-plugin": "2.0.1",
    "recharts": "0.20.8"
  },
  "devDependencies": {
    "autoprefixer": "6.7.3",
    "babel-cli": "6.23.0",
    "babel-core": "6.23.1",
    "babel-loader": "6.3.2",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-remove-prop-types": "0.3.2",
    "babel-preset-es2015": "6.22.0",
    "babel-preset-react": "6.23.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.22.0",
    "babel-register": "6.23.0",
    "browser-sync": "2.18.8",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "coveralls": "2.11.16",
    "cross-env": "3.1.4",
    "css-loader": "0.26.1",
    "enzyme": "2.7.1",
    "eslint": "3.15.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "4.0.0",
    "eslint-plugin-react": "6.10.0",
    "eslint-watch": "3.0.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.10.0",
    "html-webpack-plugin": "2.22.0",
    "isparta": "4.0.0",
    "mocha": "3.2.0",
    "node-sass": "4.5.0",
    "npm-run-all": "4.0.1",
    "open": "0.0.5",
    "postcss-loader": "1.3.1",
    "prompt": "1.0.0",
    "react-addons-test-utils": "15.4.2",
    "redux-immutable-state-invariant": "1.2.4",
    "replace": "0.3.0",
    "rimraf": "2.5.4",
    "sass-loader": "6.0.1",
    "sinon": "1.17.7",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [
    "react",
    "reactjs",
    "material",
    "material-ui",
    "template",
    "admin"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/rafaelhz/react-material-admin-template"
  }
}

.babelrc:

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ],
      "plugins": [
        "transform-decorators-legacy"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types",
        "transform-decorators-legacy"
      ]
    }
  }
}

webpack.config.dev.js:

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';

export default {
  debug: true,
  devtool: 'cheap-module-eval-source-map',
  noInfo: true,
  entry: [
    './src/webpack-public-path',
    'webpack-hot-middleware/client?reload=true',
    './src/index'
  ],
  target: 'web',
  output: {
    path: `${__dirname}/src`,
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.ejs',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}
    ]
  },
  postcss: ()=> [autoprefixer]
};

Any help is greatly appreciated.

Answer 1

It's a simple error with your parentheses. Remove one of the right parens from ((data, index)) => so that it becomes:

((data, index) =>

Then add a paren at the end of the first part of the ternary expression so that ) : "Testing" } becomes:

)) : "Testing" }