React with VScode Editor

Question

I am having some issues when I started coding on VScode with React.

According to the ReactJS docs,

Declaring Default Props With functions and ES6 classes defaultProps is defined as a property on the component itself:

class Greeting extends React.Component {
 // ...
}

Greeting.defaultProps = {
  name: 'Mary'
};

I tried to follow and this is my code:

class Records extends React.Component {

constructor(props) {
  super (props);
  this.state = {records: props.data};
      }

  Records.defaultProps = {
  records: []
};

I have this error when I type this code in VScode.

 [js] ';' expected

Is my code of .defaultProps wrong or is this a VScode thing? thanks!

Answer 1

If you want to define your defaultProps within the React component class, you need to define it with the Static keyword like

class Records extends React.Component {

constructor(props) {
  super (props);
  this.state = {records: props.data}
}

  static defaultProps = {
     records: []
  };

or else declare it like

class Records extends React.Component {

  constructor(props) {
    super (props);
    this.state = {records: props.data};
  }   
}

Records.defaultProps = {
  records: [];
};

Also in your VSCODE you may have a user setting to have a termination ; in each line