I want to create an object:

import React from "react";
import { Registration } from "../../";

const RouteObj = {
  Registration: {
    route: "/registration",
    p: <Registration />
  }
};
export default RouteObj;

And then, in a second file call:

import React from 'react';
import RouteObj from ...

class Thing extends React.Component{
  render() {
    <RouteObj.Registrationp />
  }
}

When trying this, I get the error:

React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in.

Is it possible to render React ponents in this way?

I want to create an object:

import React from "react";
import { Registration } from "../../";

const RouteObj = {
  Registration: {
    route: "/registration",
    p: <Registration />
  }
};
export default RouteObj;

And then, in a second file call:

import React from 'react';
import RouteObj from ...

class Thing extends React.Component{
  render() {
    <RouteObj.Registration.p />
  }
}

When trying this, I get the error:

React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in.

Is it possible to render React ponents in this way?

• javascript
• reactjs

2 Answers 2

Registration is already a tag (a ponent), that's why I guess you have to use curly brackets instead.

import React from 'react';
import RouteObj from ...

class Thing extends React.Component{
  render() {
    <div>
      {RouteObj.Registration.p}
    </div>
  }
}

1. You've got to export RouteObj correctly, as the default export.

Thus, add this after you declare RouteObj:

export default RouteObj;

You were trying to use something you didn't export, as the error says. It was thus undefined.

2. You can't create an element from an element, you need to create an element from a ponent class. So instead, you have to set RouteObj.p to Registration, the ponent class itself, not an instance of Registration, <Registration />.

So, instead, this is what p should be:

p: Registration