CODEWITHSUNDEEP
javascriptreactjs
kevin41
kevin41

Reputation: 608

reactJS Unexpected token, expected ";" in constructor

I'm following the tutorial here but when running their example code for importing a csv file I get an error. I have attached the error report below as well as my full code (taken from their example). I saw in another thread that the constructor in react needs to be in a class so I tried to put it in a class but then I just get a different error.

Error with out class:

SyntaxError: /Users/k/reactJS/phylo_tree/src/index.js: Unexpected token, expected ";" (6:14)
const csvSource = 'https://raw.githubusercontent.com/bkrem/react-d3-tree/master/docs/examples/data/csv-example.csv';
constructor() {
               ^
  super();

Error with class:

SyntaxError: /Users/k/reactJS/phylo_tree/src/index.js: Unexpected token, expected "," (28:11)
return (
  {/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
  <div id="treeWrapper" style={{width: '50em', height: '20em'}}>
       ^

Full code:

import React from 'react';
import { Tree, treeUtil } from 'react-d3-tree';
 
const csvSource = 'https://raw.githubusercontent.com/bkrem/react-d3-tree/master/docs/examples/data/csv-example.csv';
 
constructor() {
  super();
 
  this.state = {
    data: undefined,
  };
}
 
componentWillMount() {
  treeUtil.parseCSV(csvSource)
  .then((data) => {
    this.setState({ data })
  })
  .catch((err) => console.error(err));
}
 
class MyComponent extends React.Component {
  render() {
    return (
      {/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
      <div id="treeWrapper" style={{width: '50em', height: '20em'}}>
 
        <Tree data={this.state.data} />
 
      </div>
    );
  }
}

Upvotes: 0

Views: 102

Answers (1)

Josef Wittmann
Josef Wittmann

Reputation: 1349

The constructor and methods are part of the class, therefore they have to be inside it:

class MyComponent extends React.Component {
  constructor() {
    // ...
  }
 
  componentWillMount() {
    // ...
  }
 

  render() {
    // ...
  }
}

Upvotes: 1

Related Questions