0

Following on Dynamic tag name in jsx and React
I tried both suggested answer but both of them seems to not pass any props!!
(Here is a an example of this issue)[https://codesandbox.io/s/angry-torvalds-x7hcv?fontsize=14]
What am i doing wrong?
Here is another example which is not minimal like the one above, using React.createElement, which also doesn't work as it should and it seems its not passing any props 

outputElement = React.createElement(
  `${this.props.UI_Element.type}`,
  {
    ...globalRequiredProperties,
    ...this.props.UI_Element.config
  },
  ...UIChildren
)

In short my final goal is creating an imported component, dynamically only by having its type (or name you might say).
Update 01:
After constatnly looking i found an alternative way, this uses an array in which you map an string to the actuall component and then create a tag which uses the map to call the component
Here is an example
This seems to be working as it should but i still would like to avoid creating the map manually, meaning i still wish to only create the component only using string!, is there a way to do this?

Ali Ahmadi
  • 701
  • 6
  • 27
  • I'm confused as to what you are expecting. The demo seems to work as I'd expect. – see sharper Aug 06 '19 at 05:57
  • « Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. » Is `this.props.UI_Element.type` capitalized? – hugo Aug 06 '19 at 05:58
  • The demo consists of two parts, first is a normal calling of the component `MyComponent`, and the second is creating a tag which should call this component, and it clearly doesn't work, i think you didn't take a good look at the `render ()` – Ali Ahmadi Aug 06 '19 at 05:58
  • @hugo Yes, Of course it is. – Ali Ahmadi Aug 06 '19 at 05:59
  • @hugo, In short, i am trying to create a imported component dynamically, i tried both casing but still no luck. – Ali Ahmadi Aug 06 '19 at 06:06

1 Answers1

1

I was looking for a way to not only dynamicly import a component but also create it dynamicly, but this could not be achieve how a dynamic tag was created, after looking for a while i came across a library which exatcly does this!!
The Library is called react-loadable
Here is an example
As you can see both the import, the component tag and everything else is created dynamicly just as i want it, hope this helps everyone else too.

Ali Ahmadi
  • 701
  • 6
  • 27
  • Good! I understand now that in your first example, the tag was created, but it was not really an instance of your component, even though it had the same name. – hugo Aug 06 '19 at 12:10