Rendering components dynamically using React

Question

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?

Using context is dangerous unless you know exactly what you're doing. What about having the child import all possible components, and having the parent pass which component to use as a prop? — dshapiro
– dshapiro, Commented Sep 28, 2017 at 17:05
@dshapiro Its also a possibility. What about using require('Component-${COUNTRY}') instead of importing all possible childs? — Eduardo Pedroso
– Eduardo Pedroso, Commented Sep 28, 2017 at 17:13
I'm not familiar enough with require to say for sure whether that would work. If the teams only need different components at compile time (as it sounds), then you also have the option of doing something in the build process. For instance, you could have a "country" config option that causes that country's component to be exported as Input and then always have the parent use Input. — dshapiro
– dshapiro, Commented Sep 28, 2017 at 17:19
That sounds even better! Do you have any articles or something like that to send me? — Eduardo Pedroso
– Eduardo Pedroso, Commented Sep 28, 2017 at 17:23
Sorry, I don't. I don't know what your build process is, but I'd bet webpack is capable of something like that. If my boss were demanding this today, I'd do what's in the answer I'm about to post. — dshapiro
– dshapiro, Commented Sep 28, 2017 at 17:59

dshapiro · Accepted Answer · 2017-09-28 18:06:25Z

1

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.

answered Sep 28, 2017 at 18:06

dshapiro

1,09716 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Rendering components dynamically using React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related