Storing React classes inside a JS variable

Question

In ES5, I could store React classes like this:

const myReactClasses = {
    inlineStyles : {
        ...
    },

    firstClass : React.createClass({
        myFunction : function () {
            ...
        },
    }),
}

In an attempt to convert the syntax to ES6, I've tried:

const myReactClasses = {
    inlineStyles : {
        ...
    },

    firstClass : class firstClass extends React.Component {
        myFunction() {
            ...
        },
    },
}

and it compiles using gulp. However, when I navigate to the page where the React should render, I encounter the error: Uncaught TypeError: Cannot read property 'prototype' of undefined. Is this the correct way of replicating the same behavior from ES5 to ES6 and I simply messed up somewhere deeper in the application or is it wrong? And if wrong, can you please provide a sample snippet of what it should look like.

Dave Newton · Accepted Answer · 2017-05-22 16:07:21Z

1

Define the class outside of the myReactClasses constant.

JS syntax doesn't allow what you're trying to do. With either method the components should be defined in a file external to the object containing them if for no other reason than readability.

answered May 22, 2017 at 16:07

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

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

1 Comment

crossfuse999 Over a year ago

Ah I see. Thank you! I didn't know this

Dave Newton · Accepted Answer · 2017-05-22 16:19:22Z

0

If you very want to put react class as value into object (without intermediate variable) you can use non ES6 syntax instead. The example:

var createReactClass = require('create-react-class');

const myReactClasses = {
  firstClass : createReactClass({
    render: function() {
      return <h1>Hello, {this.props.name}</h1>;
    },
  }
}

The ES6 syntax does not return value but create a variable so you need write like this:

class firstClass extends React.Component {
   myFunction() {
     render: function() {
       return <h1>Hello, {this.props.name}</h1>;
     },
   },
}

const myReactClasses = {
  firstClass : firstClass,
}

# or more simple 

const myReactClasses = {
  firstClass,
}

edited May 22, 2017 at 16:19

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

answered May 22, 2017 at 16:17

oklas

8,2702 gold badges31 silver badges42 bronze badges

1 Comment

crossfuse999 Over a year ago

Thanks for the example! It was helpful

Collectives™ on Stack Overflow

Storing React classes inside a JS variable

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related