Last active
May 24, 2020 12:41
-
-
Save vanaf1979/0657ff75c84fea2d8e5f59e11e01868d to your computer and use it in GitHub Desktop.
Basic post navigation with React and the Wp Rest Api https://since1979.dev/basic-post-navigation-with-react-and-the-wp-rest-api/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from "react"; | |
import Axios from "axios"; | |
export default function App() { | |
// Track state for posts, current page and number of pages | |
const [posts, setPosts] = useState([]); | |
const [page, setPage] = useState(1); | |
const [nrofpages, setNumberofpage] = useState(1); | |
// When the page number changes call the api for posts. | |
useEffect(() => { | |
Axios.get("https://example.com/wp-json/wp/v2/posts", { | |
params: { page: page } | |
}).then(response => { | |
// Store the number of posible pages. | |
setNumberofpage(response.headers["x-wp-totalpages"]); | |
// Store the posts from the response. | |
setPosts(response.data); | |
}); | |
}, [page, setPosts]); | |
// Event handler: Decrease page count no lower then 1. | |
const handlePrevPage = () => setPage(page - 1 ? page - 1 : 1); | |
// Event handler: Increase page count no higher then nrofpages. | |
const handleNextPage = () => setPage(page < nrofpages ? page + 1 : nrofpages); | |
return ( | |
<div className="posts-app__wrapper"> | |
<h1>Navigate Wp Rest Api Posts</h1> | |
<div className="posts-app__post-nav"> | |
<button onClick={handlePrevPage}>Newer posts</button> | |
<p> | |
Page {page} of {nrofpages} | |
</p> | |
<button onClick={handleNextPage}>Older posts</button> | |
</div> | |
<div className="posts-app__post-list"> | |
{posts && | |
posts.length && | |
posts.map((post, index) => { | |
return ( | |
<div key={post.id} className="posts-app__post"> | |
<h2>{post.title.rendered}</h2> | |
<div | |
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} | |
/> | |
<a href={post.link} target="_blank"> | |
Read post | |
</a> | |
</div> | |
); | |
})} | |
</div> | |
</div> | |
); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment