Parsing error: Unexpected token, expected ";" line 54 in .map function

Question

I have the error: Parsing error: Unexpected token, expected ";" on line 54 where it says fill: false. I do not know what i wrong with my map function. I have the following code in my render function.

let forHover = this.state.forHover;
  let chartData = this.state.chartData;
    const theData = {
  labels: ['Scatter'],
  datasets: [
    chartData.map((data, index) => {
          label: 'Cars From Your Search',
          fill: false,
          backgroundColor: color[index],
          pointBorderColor: color[index],
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: color[index],
          pointHoverBorderColor: color[index],
          pointHoverBorderWidth: 2,
          pointRadius: 5,
          pointHitRadius: 5,
          data: data
      });
  ]
};

Possible duplicate of [unexpected token : using map to form array of object](https://stackoverflow.com/questions/44367462/unexpected-token-using-map-to-form-array-of-object) — Mohit, Sep 05 '19 at 00:12

score 1 · Answer 1 · answered Sep 05 '19 at 00:05

For an arrow functions implicit return functionality, if you want to return an object you have to wrap that object in parentheses. Otherwise, how does it know that the curly braces are the wrapper for an object, or that they're indicating the start of a code block?

Like so:

chartData.map((data, index) => ({
      label: 'Cars From Your Search',
      fill: false,
      backgroundColor: color[index],
      pointBorderColor: color[index],
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: color[index],
      pointHoverBorderColor: color[index],
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      pointHitRadius: 5,
      data: data
  }));

Parsing error: Unexpected token, expected ";" line 54 in .map function

1 Answers1