Learn React Hooks

The PostList component

After implementing the other post-related components, we can now implement the most important part of our blog app: the feed of blog posts. For now, the feed is simply going to show a list of blog posts.

Let's start implementing the PostList component now:

1. We start by importing React and the Post component:

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

2. Then, we define our PostList function component, accepting a posts array as a prop. If posts is not defined, we set it to an empty array, by default:

export default function PostList ({ posts = [] }) {

3. Next, we render all posts by using the .map function and the spread syntax:

    return (        <div>            {posts.map((p, i) => <Post {...p} key={'post-' + i} />)}        </div>