Presentational vs container components

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. 

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 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.

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