Render component based on a variable - reactjs

Question

I would like to ask, if its possible to return a component based on a variable, my idea if this is possible:

var location = this.props.location // Eg. Asia,Australia
<location+"HeaderComponent" />

My problem with this is I need to manually import all of my components individually.

This is other script that I have:

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

class Home extends React.Component {
    renderHeader(){
        if(this.props.location == "Asia"){
            return (
                <AsiaHeaderComponent />
            );
        }
        else if(this.props.location == "Australia"){
            return (
                <AustraliaHeaderComponent />
            );
        }
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}

Same with above I need to manually import all of the header that will be put inside if else condition.

is there a way to efficiently do this?

John Ruddell · Accepted Answer · 2017-02-21 10:07:13Z

7

Two things. you should first only have one header and pass it the data it needs to render what it needs to render. I'm assuming the header is probably not going to be that much different from one continent to another. Secondly.. That being said a way to dynamically get components is to use a hash table like so

const headerLookup = {
    asia: AsiaHeaderComponent,
    australia: AustraliaHeaderComponent
    .... more here
}

then your code

render() {
    const Header = headerLookup[this.props.location.toLowerCase()]

    return (
        <Header {...someprops} />
    );
}

In theory you should be able to take all of your components / elements in the header and make them be extendable based off of a type. that type being the continent name. If you want a better or more full example it would help a lot to see what you have in your header component currently so I can see commonalities between them :)

edited Feb 21, 2017 at 10:07

answered Feb 21, 2017 at 9:58

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

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

1 Comment

Sydney Loteria Over a year ago

Yeah Thanks Man! I just follow your suggestion and it looks like this will work for me now.

loveky · Accepted Answer · 2017-02-21 09:58:33Z

1

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

const componentOf = {
	aisa: AsiaHeaderComponent,
	australia: AustraliaHeaderComponent
};

class Home extends React.Component {
    renderHeader(){
    	return componentOf[this.props.location]
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}

maybe this is a little bit better?

answered Feb 21, 2017 at 9:58

loveky

1,0121 gold badge11 silver badges18 bronze badges

1 Comment

Eduard Over a year ago

How come this is the accepted answer, it doesn't work for me, while John's answer does

ayinloya · Accepted Answer · 2017-02-21 10:08:14Z

This is how I'd probably go about it, import all locations into one component, do your logic there

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

class Home extends React.Component {

    render() {
        const {continent} = this.props;


        return (
            <div>
                {continent == 'Asia' ?
                     <AsiaHeaderComponent { ...this.props} />:null
                }
                {location == 'Australia' ?
                     <AustraliaHeaderComponent { ...this.props}  />:null
                }

            </div>
        );
    }
}

export default Home

you can then import location and use it

import Home from "components/Home.jsx";

class SomeComponent extends React.Component {

    render(){
        return (
            <Home { ...this.props} location={SomeLocation} />
        )
    }
}

Sagar Shetty · Accepted Answer · 2017-02-21 10:18:24Z

ECMAScript 6 module loader API :

Apart from declarative syntax for working with modules you can load them programmatically but " ECMAScript 6 module loader API " is work in progress.

Note :

The module loader API is not part of the ES6 standard.

The module loader API is work in progress

The ways you can achieve this are :

Programmatically work with modules
Configure module loading.

You can programmatically import a module, via an API based on Promises:

  System.import('some_module')
    .then(some_module => {
        // Use some_module
    })
    .catch(error => {
        ···
    });

System.import() enables you to:

Use modules inside elements (where module syntax is not supported, consult the section on modules versus scripts for details).
Load modules conditionally.

System.import() retrieves a single module, you can use Promise.all() to import several modules:

Promise.all(
    ['module1', 'module2', 'module3']
    .map(x => System.import(x)))
.then(([module1, module2, module3]) => {
    // Use module1, module2, module3
});

There are few more ways to achieve it please refer this link ECMAScript 6 module loader API look for topic at 16.5

Collectives™ on Stack Overflow

Render component based on a variable - reactjs

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related