Use of 'const' in react classes (and meteor)

Question

I'm using meteor with react.

In a component's class, I have the following:

const Media = (props) => {
  ...  
}

But this is not working and I don't see why. I have a build error at the first line:

Unexpected token, expected (

It seems I cannot use "const" in my class. I cannot define stateless components.. Thanks for your help!

A small additional finding:

If I'm defining a component as follows:

import React from 'react';

const Test = () =>  {
  return (<img src=".." />);
}

export default Test;

Then I can import the component and everything works fine.

Now, if I have a nested 'component' as follows: import React from 'react';

class Test extends React.Component {

  const Test = () =>  {
    return (<img src=".." />);
  }

  render(){
    return(<img src=".." />)
  }

}

export default Test;

Then I got the error on the "const" line. Is this something that cannot be done? I have seen different code examples using such structures.

I installed the meteor ecmascript and es5-shim package. I don't know if I need to do something additional. — user3900157, Feb 01 '17 at 21:12
I'm using Meteor 1.4: "As of Meteor 1.3, JSX and ES2015+ transpilation is built into the core ecmascript package which is installed in all apps by default, so you can use all of the JavaScript features you love out of the box with no configuration.". Anything else I need to do? — user3900157, Feb 01 '17 at 21:16

score 3 · Answer 1 · edited May 23 '17 at 12:32

Both of these are possible:

const Media = (props) => (
  <div>
    ...
  </div>
)

const Media = (props) => {
  <div>
    ...
  </div>
}

The first one will return the div, and the later one will not.

var Media = function Media(props) {
  return React.createElement(
    "div",
    null,
    "..."
  );
};

var Media = function Media(props) {
  React.createElement(
    "div",
    null,
    "..."
  );
};

Maybe the error is somewhere else in the code.

Usually, you may create the error like this if you write:

const Media = { a, b, c} => { return a + b + c }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

where you left () for the parameters.

After your feedback, I understood the problem. In ES6 it is not possible to define variables inside the class. Only methods would be possible.

Technically when you write const, var, let inside a class you are defining a variable name, even though I know you tried to create the function.

But if you use ES7 you can define static and non-static properties without a problem inside of the class.

Try using the static keyword and without any keyword to define variables.

The closest I found was in here.

Thanks, I'm using React.Component. Complete code is something like this: `class AddPage extends React.Component { const Media = (props) => { .. } }` — user3900157, Feb 01 '17 at 22:46
Thanks for your feedback @prosti. Your explanation is indeed correct, unfortunately I need to declare this kind of variable function outside of the class. — user3900157, Feb 02 '17 at 08:21
@user3900157, please accept ✓it then since it helped you to understand the problem. — prosti, Feb 02 '17 at 09:06

Use of 'const' in react classes (and meteor)

1 Answers1