What is the best approach to render multiple React componenes - reactjs

Question

I wanna to create a following React/Redux app, and I'm looking for the best approach to handle this.
Let's start from main App container:
class App extends React.Component {
render() {
const {open} = this.props;
return open ? <Maximized/> : <Minimized/>;
}
}
const mapStateToProps = (state) => ({
open: getIsOpen(state)
});
export default connect(
mapStateToProps,
{}
)(App);
Now it's easy - depends on the state I render only two containers. Minimized container is easy so let's skip it.
In Maximized container I want to display a different views(?).
class Maximized extends React.Component {
render() {
const {view} = this.props;
let content = null;
if (view === 'DEFAULT') {
content = <Component1/>
} else if (view === 'COMPONENT2') {
content = <Component2/>
}
return <div>
{content}
<Close/>
</div>;
};
}
const mapStateToProps = (state) => ({
view: getView(state)
});
export default connect(
mapStateToProps,
{}
)(Maximized);
view is from state selector getView and is handled by the simple if, but now I have only two components to display, in the future I think this components can be n.
I think about router with the MemoryRouter (I can't use URL), but I don't know is a good approach because of I must store current state in the local storage.
Maybe there is any pattern, good practice or tool for archive this.

Answer 1

I have used a similar pattern a lot and I think it works well. One change is I would just clean up your conditional logic a bit. I would use a switch instead so that it's much easier and cleaner to handle n amount of components:
class Maximized extends React.Component {
getView = () => {
const {view} = this.props;
switch(view) {
case 'DEFAULT': {
return <Component1/>
}
case 'COMPONENT2': {
return <Component2/>
}
case 'COMPONENT3': {
return <Component3/>
}
default: {
return <Component1 />
}
}
};
render() {
const content = this.getView();
return <div>
{content}
<Close/>
</div>;
};
}
const mapStateToProps = (state) => ({
view: getView(state)
});
export default connect(
mapStateToProps,
{}
)(Maximized);

Answer 2

Well, it is kinda strange that you would have so many components using the same URL. With that being said, if you absolutely can't use URL, I guess you can create a file that import all your components, and export an object acting as a map between your view value and your component class. Something like:
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';
export default {
'DEFAULT': ComponentA,
'PROFILE': ComponentB,
'CONTACT': ComponentC,
}
Then at your App container, you can probably do something like this:
import ComponentMap from './ComponentMap';
...
...
...
render() {
const Component = ComponentMap[this.state.view];
return <Component />;
}
codesandbox for demo
EDIT:
The reason for putting all the mapping to components at separate file is to have a separation of concern. Using a traditional switch or if logic would require you to add at the very least 2 lines of code to your App container. In time, your App container could be very lengthy. If your App container also handle other things (not just mapping to components), then it would be not very pleasant to work with it.
By using separate file, your App container will not be filled with all the mappings concern. The separate file is also less verbose than using switch or if. Compare adding
'KEY': ComponentX,
to
case 'KEY': ComponentX; break;
Last but not least, using switch or if would result in O(n) time to get the component you are looking for, compared to O(1) time if you are using javascript object.