text: import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { fetchPosts } from "../actions/postActions";
  
  class Posts extends Component {
    componentWillMount() {
      this.props.fetchPosts();
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.newPost) {
        this.props.posts.unshift(nextProps.newPost);
      }
    }
  
    renderPosts = () => {
      return this.props.posts.map(post => (
        <div key={post.id} className="card">
          <div className="card-body">
            <h5 className="card-title">{post.title}</h5>
            <p className="card-text">{post.body}</p>
          </div>
        </div>
      ));
    };
  
    render() {
      return (
        <div className="container">
          <h2>Posts</h2>
          <hr />
          {this.renderPosts()}
        </div>
      );
    }
  }
  
  Posts.propTypes = {
    fetchPosts: PropTypes.func.isRequired,
    posts: PropTypes.array.isRequired,
    newPost: PropTypes.object
  };
  
  const mapStateToProps = state => ({
    posts: state.posts.items,
    newPost: state.posts.item
  });
  
  export default connect(
    mapStateToProps,
    { fetchPosts }
  )(Posts);
  