Syntax error: Unexpected token, expected }

Question

I am a JavaScript and React noob and I'm working on a website that has some features, like displaying a queue of our data. I'm trying to display the queue with a bar chart using chartjs. I tried plugging in their example bar graph to see how it would look just for testing purposes and I can't even get that to work. Any help is appreciated.

import React from 'react';

const QueueDisplay = () =>(
<container>
<h1> QueueDisplay </h1>
<canvas id="myChart" width="400" height="400"></canvas>
  var config = {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, config);

</container>
);

export default QueueDisplay;

I keep getting this error:

Syntax error: Unexpected token, expected } (9:8)

   7 | <canvas id="myChart" width="400" height="400"></canvas>
   8 |   var config = {
>  9 |     type: 'bar',
     |         ^
  10 |     data: {
  11 |         labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  12 |         datasets: [{

Answer 1

You can't write JS inside a React Component like that. It is not valid for JSX. Reason of this is mentioned very well by Jonathan Lonowski in his comment.. You can use Ref here and use it to initialize the Chart using componentDidMount hook. And turn the dumb component to class component like:

import React, { Component } from "react";

class QueueDisplay extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    new Chart(this.canvas, this.config);
  }

  get config() {
    const configData = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
            ],
            borderColor: [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
            ],
            borderWidth: 1
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    };

    return configData;
  }

  render() {
    return (
      <container>
        <h1> QueueDisplay </h1>
        <canvas
          id="myChart"
          ref={dom => this.canvas = dom}
          width="400"
          height="400"
        />
      </container>
    );
  }
}

export default QueueDisplay;

Answer 2

Maintain the config object outside of the QueueDisplay function, then use it.

import React from 'react';

  const config = {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}
  const ctx = document.getElementById("myChart").getContext('2d');
  const myChart = new Chart(ctx, config);

const QueueDisplay = () =>(
<container>
<h1> QueueDisplay </h1>
<canvas id="myChart" width="400" height="400"></canvas>
</container>
);

export default QueueDisplay;