Basic post navigation with React and the WordPress Rest Api.
Tags: wordpress, webdev, php, css
Published: 2020-05-21 18:46:04

---
title: Basic post navigation with React and the WordPress Rest Api.
published: true
description: In this tutorial we will have a look at React and the WordPress Rest Api and create a basic post navigation app.
canonical_url: https://since1979.dev/basic-post-navigation-with-react-and-the-wp-rest-api/
cover_image: https://since1979.dev/wp-content/uploads/2020/05/basic-post-navigation-with-react-and-the-rest-api.jpg
tags: wordpress, webdev, php, css
---
[Originally posted on my website on May 21th 2020](https://since1979.dev/basic-post-navigation-with-react-and-the-wp-rest-api/)

### Creating a list of WordPress posts with navigation in React

Lately I've been playing around with React.js and the WordPress Rest Api and in this article I want to share with you some of the basic things i learned.

So in this article we are going to create a very basic App that can fetch posts from the WordPress Rest Api and lets users paginate between different pages of posts.

I'm going to assume that you at least know the basics of React. And that you already have bare-bone React app setup because I'm not going to handle that in this article. Please refer to the Sand Box below above if you want to see how I set this up.

##### Sandbox

I have a Code Sand Box setup [here](https://codesandbox.io/s/wordpress-react-rest-api-basics-tutorial-crtwr) with a working version of what we are going to created so you can check it out and also grab the styles to make it look a bit more presentable

### Fetching posts and rendering the list

#### Some local state

To get started we need some local state to store the post data we get back from the Api.

{% gist https://gist.github.com/vanaf1979/b75d097cfa6fcda2c5fb0ead2adeec23 %}

To do so we use the [*useState*](https://reactjs.org/docs/hooks-state.html) hook to create some local state to hold out *posts* and a *setPosts* function to update this state. We also default it to an empty array.

#### Fetching the posts

Now that we have some state we can fill it with posts from the [WordPress Rest Api.](https://developer.wordpress.org/rest-api/)

{% gist https://gist.github.com/vanaf1979/55f0f6b28317f245da7a46f4f7d6e9df %}

To get the posts from the Api we use the *[useEffect](https://reactjs.org/docs/hooks-effect.html)* hook to run when our component gets mounted and then we use [*Axios*](https://github.com/axios/axios) to make the actual Api request.

To get our first list of the ten latest posts we can simply call the /wp-json/wp/v2/posts end-point. When the requests returns we simply store the date using the *setPosts* function we created.

#### Rendering the posts

Now that we have a list of posts to work with we can render them.

{% gist https://gist.github.com/vanaf1979/5d63a0f40a69a5e85a9c25c7e431c1ff %}

Here we first render a wrapper *div* and a little title for our app. Inside this *div* we create another *div* to wrap our list of posts.

Then we do a check to see if our posts lists gives a true-thy value and if it has more then 0 values, meaning it is no longer an empty array.

We then use the [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) higher order function to loop over out posts list and render out a *div* containing the *posts* data we want to show.

We render a *h2* tag with the post title. We then use *[dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html)* to render the excerpt because the Api returns an Html *p* tag containing the excerpt and React doesn't allow us to render plain Html. lastly we create an *a*nchor tag with a link to the post.

Note that we append *.rendered* to the title and the excerpt. It looks a bit silly because the Api doesn't return an un-rendered version but it is what it is!

### Adding post navigation

Thus far we are only displaying the latest ten posts but it would be nice if our users can paginate to older posts and back as well. So lets add that to our little app.

#### Page and Nrofpage state

By default the WordPress Rest Api divides our posts into "pages" containing ten posts each. We could change that number but in this case we will stick to the default ten.

To keep track of the current page and the maximum number of pages we need to create some more local state.

{% gist https://gist.github.com/vanaf1979/287ff9660443fa0f66a5060eaa108ad2 %}

In the code snippet above we use the *setState* function to create some state for the current *page*, default it to 1 since there is no page 0, and a function called *setPage* to change this value. we also create state for *nrofpages*, default that to 1 also and a *setNumberofpage* function to change this state as well.

#### Adjusting the useEffect function

Now we need to pass the *page* number to the Rest Api, and also get the max number of pages from the initial response.

{% gist https://gist.github.com/vanaf1979/ac27247dfe47cae3b17a6b35046fb0e9 %}

First we add our *page* state to the dependency list for our *useEffect* function so it will not only run when our component gets mounted but also when the value of *page* changes.

Then we pass an extra object to our *Axios.get* function being an object with a key of *params*, and set that to another object containing the data we want to send to the Api.

In this case we need to send the page number we want to retrieve. so we add a key value pair for *page* and set that to the value of our *page* state we created.

When our request gets back we now also grab the max number of pages from the response headers with *response.headers["x-wp-totalpages"]*. And add that to our *nrofpages* state using our *setNumberofpage* function.

#### Adding event handlers

To be able to switch between pages we need some buttons for "newer posts" and "older posts". but first we need some event handlers for when these buttons get clicked.

{% gist https://gist.github.com/vanaf1979/5325a7db2918cb3a005cce187097360e %}

First we create a function called *handlePrevPage* and use it to decrement our *page* state by 1 using our *setPage* function. But we use a ternary operator to first check if *page -- 1* results in a true-thy value, meaning it must be 1 or higher. if it is we can decrement by 1 else we just set it to be 1 since that is the lowest possible page number.

We also add a *handleNextPage* function which does almost the same but now we need to increment by 1 and check if the *page* state doesn't exceed the maximum number of pages if it does we just set it to *nrofpages*.

#### Rendering the navigation

With our event handlers in place we can render out a little navigation above our *posts* list.

{% gist https://gist.github.com/vanaf1979/9a68e600dc67f319bb3c38bda0567a04 %}

Here we render another wrapper *div* above our posts list, and inside of this *div* we render two buttons setting their *onClick* events to *thehandlePrevPage* and *handleNextPage* event handler functions we just created.

In between the buttons we also render a *p* tag with a little indicator of what page the user is currently on.

With all this in place our app now fetches a list of ten posts from the WordPress Rest Api and renders it to the screen. It also allows our users to paginate forward and backwards between the pages of posts.

#### Completed component

Below is the completed code for our component as a reference. And again I also have a Code Sand Box [here](https://codesandbox.io/s/wordpress-react-rest-api-basics-tutorial-crtwr) with a working version of what we created so you can check it out and also grab the styles to make it look a bit more presentable.

{% gist https://gist.github.com/vanaf1979/0657ff75c84fea2d8e5f59e11e01868d %}

### Follow?

Let's connect on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading and stay safe.**