Learn React Hooks

Creating the PostPage component

We are now going to define a new page component, where we will only fetch a single post from our API and display it.

Let's start creating the PostPage component now:

1. Create a new src/pages/PostPage.js file.
2. Import React, the useEffect and useResource Hooks and the Post component:

import React, { useEffect } from 'react'import { useResource } from 'react-request-hook'import Post from '../post/Post'

3. Now, define the PostPage component, which is going to accept the post id as prop:

export default function PostPage ({ id }) {

4. Here, we define a Resource Hook that will fetch the corresponding post object. We pass the id as dependency to the Effect Hook so that our resource re-fetches when the id changes:

 const ...