How to dynamically request a React Component based on a variable value?

Question

I'm wondering how to dynamically request a component based on a variable value. What I'm trying to accomplish here is the following:

import Template1 from './Template1.jsx';
import Template2 from './Template2.jsx';

var ComponentTemplate = (some_condition === true) ? "Template1" : "Template2"

render() {
    <ComponentTemplate prop1="prop1 val" />
}

Is this even possible? If so, how?

@JoshDavidMiller the actual names of a component. I updated the text to add some clarity — Nick ONeill
– Nick ONeill, Commented Jan 12, 2016 at 20:12
Could you just put the render itself within the conditional statement? Or just set the variable to the React template component itself? — Nick Zuber
– Nick Zuber, Commented Jan 12, 2016 at 20:15

Josh David Miller · Accepted Answer · 2016-01-12 20:19:19Z

3

It is not clear to me why you need to use a string representation of a class rather than just switch the component or use a conditional render:

var Component = some_condition === true ? Template1 : Template2;
// ...
return ( <Component /> );

But assuming this is an oversimplification, the easiest thing to do would be to use a mapping object that translates a string into a component. With ES2015 enhanced object literals, it becomes fairly straightforward:

var Components = {
  Template1,
  Template2,
};

var Component = condition ? Components['Template1'] : Components['Template2'];

// ...

return ( <Component /> );

answered Jan 12, 2016 at 20:19

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

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

4 Comments

Nick ONeill Over a year ago

Nope, I think you nailed it the first time around.

hlissnake Over a year ago

It won't work I think. Because the React will compile the JSX tag by variable name. If you place Component to JSX. It will be React.createElement('Component') as well. It make no sense to using your original one.

Josh David Miller Over a year ago

@hlissnake I don't think I followed that, but it definitely will work. React.createElement takes either a string or a React class. It won't stringify a function/class. The call would actually be React.createElement( Component, {} );, where Component is a reference to a place in memory housing a function definition.

hlissnake Over a year ago

@Josh David Miller yes you are right. for primitive tag like 'span', 'div', it will compile into String. for element Class it will turn into Class object. Thanks

user1461064 · Accepted Answer · 2016-01-12 20:16:10Z

2

If you are just looking to render different component based on the condition you could actually have 2 other render function and inside render() you could check the condition and call corresponding render

render () {
  !this.state.isAuthorized? renderLogin(): renderTweets();
}

renderLogin () {
   <LoginView/>
}

renderTweet () {
   <ListTweets/>
}

Hope this is what you were looking for!

answered Jan 12, 2016 at 20:16

user1461064

485 bronze badges

1 Comment

hlissnake Over a year ago

That's the correct way to define different React element

hlissnake · Accepted Answer · 2016-02-28 21:33:08Z

0

All the dynamic rendering should inside Render function. Because the JSX compile will depend on the Variable name not the Object reference.

If you write <Component />, it will transfer to React.createElement('Component').

Cannot refer to the dynamic component you want to choose.

depend on the condition when Render is running. Use different React tag you want.

render() {
    condition ? <Template1 /> : <Template2 />
}

answered Feb 28, 2016 at 21:33

hlissnake

2252 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to dynamically request a React Component based on a variable value?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related