React named presentational / container parent / child components breakdown


April 2019


8 time


Okay, I am trying to make a project using container / presentational components design but I am missing some kind of information or knowledege.

What I am trying to do is to render a component based upon it's parent component's type:

I have this route: http://localhost:3000/:componentId

componentId has a backend model with a type (HTML or Text).

So, I guess I could create the Component with the following structure:


const HtmlPage = props => {
    return <Fragment>My HTML Component</Fragment>

const TextPage = props => {
    return <Fragment>My Text Component</Fragment>

// material-ui styles
const HtmlComponent = withStyles(styles)(HtmlPage);
const TextComponent = withStyles(styles)(TextPage);

export {


import {
    HtmlComponent as HtmlPage,
    TextComponent as TextPage
} from './page';

class Component extends React.Component {
    constructor(props) {
        this.state = { componentType: 'HTML' };

    componentDidMount() {
        // Retrieve model's type from backend

    render() {
        switch(this.state.componentType) {
            case 'HTML':
                return <HtmlPage />;
            case 'Text':
                return <TextPage />;

    export default Component;

So my question is, is this component "split" well formed or I should create multiple components for HtmlPage and TextPage and then import them on a parent Component?

Any comment is appreciated.

0 answers