Presentational vs Container Components

In react, the components are divided into two categories: presentational components and container components. Each of these has its own characteristics. Let’s look at both of these components in detail. 

Presentational components:

• Mainly concerned with how things look.
• Have no major dependencies on the rest of the app.
• No connection with the specification of the data that is outside the component.
• Mainly receives data and callbacks exclusively via props.
• May contain both presentational and container components inside it considering the fact that it contains DOM markup and styles of their own.

Example: For example, the below code denotes a presentational component, and it gets its data from the props and just focuses on showing an element. 

javascript

// presentational component
const Users = props =>
(<ul>
    {props.users.map(user =>
        (<li>{itr}</li>))
    }
</ul>)

Container components:

• Mainly concerned with how things work.
• May contain both presentational and container components but does not have DOM and markup of their own.
• Provide the data and behavior to presentational or other container components.
• Call flux actions and provides these as callbacks to the presentational component.

javascript

// container component
classUsersContainerextendsReact.Component{
    constructor()
    {
        this.state = {
            itr: []
        }
    }
    componentDidMount() {
        axios.get('/users').then(itr => this.setState({ users: itr }))
        )
    }
    render() {
        return <Usersusers = {this.state.itr
    } />
}}

Finally, at the conclusion we can conclude in simple terms that the presentational components are concerned with the look, and container components are concerned with making things work.