javascript - Render React element from object value - Stack Overflow

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

Share Improve this question Follow edited Nov 7, 2017 at 14:31 Ben Irving asked Nov 7, 2017 at 13:24 Ben IrvingBen Irving 49311 gold badge66 silver badges2121 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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