CODEWITHSUNDEEP
javascriptreactjsreact-redux
Eduardo Pedroso
Eduardo Pedroso

Reputation: 879

Rendering components dynamically using React

I have an application that runs in 3 different countries (something close to an e-commerce). Each country has a development team that can change some specific component to fit the needs. I'm thinking about passing the components through context, but how to pick the Form-US or the Form-UK, for example? (Thinking that importing dynamically it's not possible in React)

My App.js

import React from 'react'
import UserInput from './common/UserInput'

class App extends React.Component {

  getChildContext () {
    return {
      input: UserInput
    }
  }

  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

App.childContextTypes = {
  input: React.PropTypes.object
}

export default App

And I pick the component when needed like that:

render () {
    const Input = this.context.input
    return (
        <Input placeholder='Input Test'/>
    )
}

That Works just fine, but its that a good practice? It's there a better way to do it and how can I add a component with a specific name to that structure?

Upvotes: 0

Views: 174

Answers (1)

dshapiro
dshapiro

Reputation: 1107

As we discussed in the comments, there are smarter ways to do this. But if I needed a solution to this today, here's what I'd do:

index.js for 'Input'

import ComponentUS from './Component-US';
import ComponentBR from './Component-BR';
import ComponentAG from './Component-AG';
import config from '../config.json';

let thingToExport;
if (config.country === 'US') {
  thingToExport = ComponentUS;
} else if (config.country === 'BR') {
  thingToExport = ComponentBR;
} else {
  thingToExport = ComponentAG;
}
export default thingToExport;

And then the parent can just import Input from index.js.

Upvotes: 1

Related Questions