React named presentational / container parent / child components breakdown

Refresh

April 2019

Views

8 time

1

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:

page.js:

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 {
    HtmlComponent,
    TextComponent
};

index.js:

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

class Component extends React.Component {
    constructor(props) {
        super(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