Basic Reactjs - error with a function

Question

I'm learning Reactjs and trying some ES6 features at the same time. Here's a reactjs component that gives me an error:

import React from "react";

export default class Features extends React.Component {

  function myFunc(x, y=5) {
    return x * y;
  }

  render() {

    return (
        <div>
        <p>This is number {this.props.feature}</p>
        {this.myFunc(4,1)}
      </div>
    );
  }
}

For some reason it does not like the function declaration.

I have tried both syntaxes of function declarations:

myFunc: function (x, y=5) {...}

and

function myFunct(x, y=5) {...}

Why does my IDE highlights the space between "function" and "myFunc" and it throws an error:

./src/js/components/Features.js
Module build failed: SyntaxError: X:/projects/react-gallery/src/js/components/Features.js: Unexpected token (5:11)
  3 | export default class Features extends React.Component {
  4 | 
> 5 |   function myFunc(x, y=5) {
    |            ^
  6 |     return x * y;
  7 |   }

Miguel · Accepted Answer · 2016-03-14 22:35:27Z

4

Get rid of the function keyword. Methods is ES6 classes are defined using the shorthand notation only, so the method definitions should look like this:

export default class Features extends React.Component {

  myFunc(x, y=5) {

  }

  render() {

  }
}

edited Mar 14, 2016 at 22:35

answered Mar 14, 2016 at 22:30

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

daniellepelley · Accepted Answer · 2016-03-14 22:32:18Z

1

You don't need the word function. You can have

import React from "react";

export default class Features extends React.Component {

myFunc(x, y=5) {
  return x * y;
}

render() {

  return (
      <div>
      <p>This is number {this.props.feature}</p>
      {this.myFunc(4,1)}
    </div>
  );
}
}

answered Mar 14, 2016 at 22:32

daniellepelley

1,9891 gold badge11 silver badges12 bronze badges

Collectives™ on Stack Overflow

Basic Reactjs - error with a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related