CODEWITHSUNDEEP
reactjsreduxreact-redux
Undistraction
Undistraction

Reputation: 43589

Dynamically Supply Component To Redux Container

I have a basic redux container:

import { connect } from 'react-redux';
import Renderer from '../components/renderers/AlphaRenderer/AlphaRenderer';

const mapStateToProps = state => ({
  ...
});

const mapDispatchToProps = dispatch => ({
  ...
});

const RendererContainer = connect(mapStateToProps, mapDispatchToProps)(AlphaRenderer);

export default RendererContainer;

This exact same container is used with multiple React components - each component uses the same props and emits the same events, but other than that are very different from one-another. Rather than repeat the same container for each component, I would like a way to pass in the component to the container. The equivalent of:

<RendererContainer component={AlphaRenderer} />
<RendererContainer component={BetaRenderer} />
<RendererContainer component={CharlieRenderer} />

Is there a way to pass a component into a container at runtime?

Upvotes: 2

Views: 1537

Answers (1)

Umang Gupta
Umang Gupta

Reputation: 16440

You can obviously do something like 

//just the connect function
const RendererContainer = connect(mapStateToProps, mapDispatchToProps);

//react component 
const ReduxWrapperComponent = (props) => (return React.createElement(RendererContainer(props.component));)

or 
const ReduxWrapperComponent = (props) => (return <div>{RendererContainer(props.component)}</div>;)

//use it as 
//<ReduxWrapperComponent component={XYZ}/>

Upvotes: 1

Related Questions