CODEWITHSUNDEEP
javascriptreactjs
Ali Ahmadi
Ali Ahmadi

Reputation: 731

Dynamic tag name in jsx and React doesn't pass props

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?

Upvotes: 0

Views: 166

Answers (1)

Ali Ahmadi
Ali Ahmadi

Reputation: 731

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.

Upvotes: 1

Related Questions