Skip to content
Related Articles
Open in App
Not now

Related Articles

Presentational vs container components

Improve Article
Save Article
  • Last Updated : 10 Jun, 2022
Improve Article
Save Article

In react the components are divided into two categories: presentational components and container components. Each of these have their own characteristics. Let’s look at both of these components in details. 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. 


// presentational component
const Users = props =>
         { =>
            (<li>{itr}</li>    ))

Container components

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


// container component
    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, container components are concerned with making things work.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!