CODEWITHSUNDEEP
javascriptreactjs
crossfuse999
crossfuse999

Reputation: 43

Storing React classes inside a JS variable

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.

Upvotes: 1

Views: 554

Answers (2)

oklas
oklas

Reputation: 8220

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,
}

Upvotes: 0

Dave Newton
Dave Newton

Reputation: 160181

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.

Upvotes: 1

Related Questions