Learning Redux

PostList component

The next step is writing a component that can display multiple posts:

1. Create a new src/components/PostList.jsx file.
2. The PostList component will take a posts array as a property and render multiple Post components. We will use the map() function you learned about earlier. Put the following code into the previously created file:

import React from 'react'
import Post from './Post.jsx'

const PostList = ({ posts }) =>
  <ul>
    {posts.map(
      (post, i) =>
        <li key={i.toString()}>
          <Post {...post} />
        </li>
    )}
  </ul>

export default PostList

Let's take a closer look at the map() function:

• We loop through all posts in the array and create and return a <li> element for each post. These <li> elements will be children of the <ul> element. ...