React React Component Lifecycle React Component Container
Example
When building a React application, it is often desirable to divide components based on their primary responsibility, into Presentational and Container components.
Presentational components are concerned only with displaying data - they can be regarded as, and are often implemented as, functions that convert a model to a view. Typically they do not maintain any internal state.
Container components are concerned with managing data. This may be done internally through their own state, or by acting as intermediaries with a state-management library such as Redux. The container component will not directly display data, rather it will pass the data to a presentational component.
// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';
class CommentsListContainer extends Component {
constructor() {
super();
// Set initial state
this.state = { comments: [] }
}
componentDidMount() {
// Make API call and update state with returned comments
Api.getComments().then(comments => this.setState({ comments }));
}
render() {
// Pass our state comments to the presentational component
return (
<CommentsList comments={this.state.comments} />;
);
}
}
// Presentational Component
const CommentsList = ({ comments }) => (
<div>
{comments.map(comment => (
<div>{comment}</div>
)}
</div>
);
CommentsList.propTypes = {
comments: React.PropTypes.arrayOf(React.PropTypes.string)
}
