import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PostsItem from './PostsItem';

class PostsListing extends Component {
  componentDidMount() {
    this.props.fetchPosts();
  }

  render() {
    return (
      <ul>
        {this.props.posts.map(post => <li><PostsItem key={post.id} {...post} /></li>)}
      </ul>
    );
  }
}

PostsListing.propTypes = {
  fetchPosts: PropTypes.func.isRequired,
  posts: PropTypes.arrayOf(PropTypes.object).isRequired
};

export default PostsListing;

@@ -285,54 +285,100 @@
  =%3E 
-%3Cli%3E%3CPostsItem key=%7Bpost.id%7D %7B...post%7D /%3E%3C/li%3E
+(%0A          %3Cli key=%7Bpost.id%7D%3E%0A            %3CPostsItem %7B...post%7D /%3E%0A          %3C/li%3E)%0A        
 )%7D%0A 

Update post listing