We have already thought about which elements a post has when creating the mock-up. A post should have a title, content, and an author (the user who wrote the post).

Let's implement the Post component now:

1. First, we create a new file: src/post/Post.js
2. Then, we import React, and define our function component, accepting three props: title, content, and author:

import React from 'react'

export default function Post ({ title, content, author }) {

3. Next, we render all props in a way that resembles the mock-up:

    return (
        <div>
            <h3>{title}</h3>
            <div>{content}</div>
            <br />
            <i>Written by <b>{author}</b></i>
        </div>
    )
}

4. As always, we can test our component by editing the src/App.js file:

import React from 'react'

import Post from './post/Post'

export default function App () {
    return <Post title="React Hooks" content="The greatest thing since sliced bread!" author="Daniel Bugl" />
}

Now, the static Post component has been implemented, and we can move on to the CreatePost component.