Dynamically render component based on props

Question

I want to pass the component path from a parent react component to a child react component, and this child component should import the component when the props are ready, but dynamic import rely on that the passed value should be string not a value to resolve at runtime, anything can help me in the

example

<Parent childComponentPath={'../foo/bar'}/>
  cont child = require(this.props.childComponentPath)
  
  <Child/>

Edit: I've tried System.import not working

yes they are different , each has type to render different component — Reem, Jan 19 '19 at 10:05
Possible duplicate, please see [this](https://stackoverflow.com/a/29168531/3822311) answer — Dor Shinar, Jan 19 '19 at 10:08
Possible duplicate of [ES6 variable import name in node.js?](https://stackoverflow.com/questions/29168433/es6-variable-import-name-in-node-js) — Patrick Hund, Jan 19 '19 at 10:24

score 1 · Answer 1 · answered Jan 20 '19 at 00:00

This wont work because the packager has already packed the files. The same reason why you cant have dynamic require's.

You would need to modify your logic to accept a string probably and then have like a factory to render a component dynamically. Something like this:

<Parent child='one'/>

render(){

 let Component = One;

switch(this.props.child){
   case: 'one':
      Component: One; break;
    case: 'two':
     Component: Two; break;
}

return <Component/>

}

score 0 · Accepted Answer · answered Jan 26 '19 at 16:52

0

I've made a separate JS file importing all external components then dynamically send the component name in props to pick the one from this file, also dynamic loading. won't work when the value passed in require is calculated at runtime.

answered Jan 26 '19 at 16:52

Reem

150
2
15

Dynamically render component based on props

2 Answers2