React Js - Create component from String doesn't work

Question

I want to create a list of component using strings. Searching on Google/StackOverflow, this seems to be easy:

import Light from 'light.jsx';

[...]

getComponent()
{
  let DynamicComponent = "Light";
  return <DynamicComponent />;
}

Unfortunally, this approach doesn't work. I get this error non console:

Warning: <Light /> is using uppercase HTML. Always use lowercase HTML tags in React. Warning: The tag <Light> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

I've tried many combinations like:

return React.createElement(DynamicComponent, {}) };
return React.createElement("Light", {}) };
return <div> { React.createElement(DynamicComponent, {}) }</div>;

They all returns the same error.

Obviously if I use:

return <Light />

it works.

create a map of elements and strings like this: let map = {"Light": Light, "Fan": Fan} then use this: let DynamicComponent = map["Light"], and the you will be able to render it like this: <DynamicComponent />, let me know if it fails to solve your issue or you need any other help. — Mayank Shukla
– Mayank Shukla, Commented Feb 20, 2018 at 11:35
Hi. Thank you for the answer but you solution is not what I'm looking for. You are creating an associative array that connect a string to a component (it works). In my case (is the first step in creating a namespace import system, I can't use the component directly. I need somethings like this: let mapsOfComponent = ["Light","Fan"] let DynamicComp = mapsOfComponent[0]; return <DynamicComp /> — RetroMime
– RetroMime, Commented Feb 20, 2018 at 11:48
ok got the idea, but in the same file you have to import all the components first, correct? like import Light ....;, import Fan .... etc? — Mayank Shukla
– Mayank Shukla, Commented Feb 20, 2018 at 11:51
Im using a strange approach to implement some sort of namespace import using a tutorial founded on google (search react namespase, the first result) to allow wildcards import so every new component has to be added to one file only (allimport.js) so a dynamic list of component taken from DB may works: import * as Dynamic from 'allimport.js'; then: let DynamicComponent = "Dynamic.Light"; return <DynamicComponent /> then in the allimport.js import Light from './light.jsx'; import Fan from './fan.jsx'; — RetroMime
– RetroMime, Commented Feb 20, 2018 at 12:02

Mayank Shukla · Accepted Answer · 2018-02-20 12:08:47Z

1

As you mentioned in the comment, you are putting all the import in a file like this:

import Light from './light.jsx'; 
import Fan from './fan.jsx';

export {
    "Light": Light,
    "Fan": Fan
}

And trying to use:

import * as Dynamic from 'allimport.js'; 
let DynamicComponent = "Dynamic.Light";
return <DynamicComponent />

Everything is proper, just remove the "" around "Dynamic.Light", it should be Dynamic.Light.

For more details check this answer: Dynamically rendering component from string: ReactJS

answered Feb 20, 2018 at 12:08

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Comments

RetroMime · Accepted Answer · 2018-02-20 13:29:45Z

0

Sorry to bother you but I still get some errors:

(1) The import you wrote rise this error: "Unexpected token" at the first DoubleQuotes. All the export statement is red-underlined by IDE;

(2) I can't remove the doublequotes from Dynamic.Light because this assume I KNOW that a Light component exists. But all this stuffs Im trying to make working is to prevent the developer to know them. I receive a list of what to render from DB managing this information in a loop. I need to be more flexible.

listOfComponentFromDB.map(name){
   let DynamicComponent = "Dynamic."+name;
   allRendered.push(<DynamicComponent />);
}
return allRendered;

With this approach to add a new component to the master render, it will be non necessary to modify the master render because you will have only to put the ne fan.jsx in the directory, add it to the import and INSERT the new row on the DB.

answered Feb 20, 2018 at 13:29

RetroMime

3872 gold badges9 silver badges24 bronze badges

1 Comment

RetroMime Over a year ago

I finally got a working solution. Is not totally the best but it works and Im fine with it. First of all, the import.js has to be something like this:

import Light from 'light.jsx'; var dynamic_components = { }; dynamic_components['light'] = Light; export default (dynamic_components);

than in the component class, you can simply: import dynamic_components from 'allimport.jsx'; and then let DynamicComp = dynamic_components['light']; return <DynamicComp />

Collectives™ on Stack Overflow

React Js - Create component from String doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related