React problems with class properties

I’m following a react tutorial that is provided on the react website, because I don’t feel like the one from FCC is working for me. I have a chunk of code that is throwing an error, and I don’t understand where it is coming from.

The error is "class properties must be methods. Expected ‘(’ but instead saw ‘=’.

Can anyone explain this error?

import React, {Component} from 'react';
import Table from './Table';


class App extends Component {
  
  state = {
    characters: [
         {
            'name': 'Charlie',
            'job': 'Janitor'
         },
         {
            'name': 'Mac',
            'job': 'Bouncer'
         },
         {
            'name': 'Dee',
            'job': 'Aspring actress'
         },
         {
            'name': 'Dennis',
            'job': 'Bartender'
          }
      ]
  };
  
  render() {

        
    return (
      <div className="container">
      <Table characterData = {characters} />
      </div>
      );
  }
}
export default App;

Are you using babel to transform the code? You may want to include a Babel plugin transform-class-properties.

Or you can use create-react-app (CRA) to bootstrap a working copy. CRA already has these things set up.

Hi !

In React, the component state should always be initialized within a constructor method like so :

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      characters : [ ... ]    
    };
  }
}
1 Like

I’ll give this a try. If it works I’ll mark as solution. Thanks!

I did use create-react-app, but I am using a terrible ide for development. I wonder if it might be a linting issue. I’m running material neutron, because it runs on arm processors. Although I might need to resign to using cloud 9 in the future.

Sorry. Just noticed that there’s also a problem with the way you pass data through props here

It should be :

<Table characterData={this.state.characters} />

Hope this helps :wink:

Yeah that’s weird. Can you share a link to this tutorial ? The React website itself provides a pretty decent tutorial for beginners. If the FCC course doesn’t suit you, I would recommand starting there :

@rfargetton that worked for me thanks!