In the following tutorial, we’ll see how to retrieve and show a single post from a WordPress site. We’ll learn how to create and render a simple
Creating a Post component
First, we need to write a component which will render our post. Let’s call it
Post. The component won’t have any logic and will only render a few pieces of data (such as post title, content, author and publication date), so we can define it as a stateless functional. We will just pass down a few arguments and the
Post component will render them.
Speaking about its parameters, the first one is
props. It’s an object containing all the props we sent to it. We can make use of ES6 object destructuring to extract our props out of the parameter directly without having to assign them in the component. Now, let’s return something from the component! We are using the JSX syntax for writing React code as it looks similar to HTML, saves some typing and is a pretty widely used standard.
Firstly, we wrap the body of the post in
section React component. Notice the
className prop: normally, you would write just
class instead of
className when defining CSS classes for a HTML element. However, as
className. But no worries! It works the same as HTML
We fill the article’s section with some
h2 containing the title. Notice the curly braces wrapping the
article component with a CSS class
content and one special prop called
Rendering string which contains HTML elements in React
When using a React component such as
section, sometimes, we might need to output a HTML that is in form of a string. If we used the first technique (wrapping the
content variable in curly braces and putting them inside
article), React would render the HTML tags from the string as plain text without transforming them into proper HTML elements.
We are in this situation: we receive a post content from a server and this content contains HTML tags. In PHP or other server-side languages, we could just output this string into HTML somewhere and it would work. In React, it’s a different story — but for a good reason: security. I think the reasoning behind this is best explained on the React docs page:
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous
Fortunately, we can trust the data which we receive from the
wp-json/wp/v2/posts endpoint as it retrieves the post content in the same way as when showing a post normally (thus sanitizing and securing it for us). But remember, always double-check the data which you are passing to
dangerouslySetInnerHTML. The only thing we need to do here is to put a new object with a single property
__html: content into
dangerouslySetInnerHTML and React will render the HTML tags as React components instead of just pieces of strings.
Finally, what’s left for us is to render the author’s avatar image, author’s name and the article’s publication date. For the image, we use the native
img component. As you can see from the code, the
img component is very similar to how you would use the
img HTML element. Nothing special, really. 🙂
Getting article data
In order to make it as simple as possible, we are using jQuery to make a
GET request for the article data. WP API returns the data in a form of JSON. jQuery has a handy method called getJSON which retrieves the data from the specified URL, transforming them from JSON string into JS object. It also implements the Promise interface so we can use
then method instead of relying on callbacks.
What about authentication? We don’t need any! If a piece of data is public on a WordPress site, WP API provides it without having to authenticate in any way. This makes it pretty easy to get any public data from any WP site with WP API.
_embed query parameter. Without specifying that parameter, we would have to do another request for getting the post author’s name or avatar. WP API is designed in such a way that it provides the least amount of data needed to satisfy a request. Any additional related data is provided through set of links which are included in a default response.
For example, this is how it looks if we do a
GET request to
We can see the post
content and so on. Notice the
author section. Instead of containing the data about the author, it contains just a link (
href) to the endpoint which can give us the author details. However, if we add the
_embed query parameter, WP API will respond with all the data about the author as its
embeddable key is set to
true. You can read more about this behavior on WP API docs pages.
Continuing, we now extract the article’s data into variables so it’s easier to pass them into the
Post component later. Notice the
Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can’t be redeclared.
As far as handling publication dates (or any date/time manipulation) is concerned, we chose to use moment.js JS library. WP API returns the publication date in two formats:
date_gmt. The first one (
date) is the local publication date of the author of the post. The other one (
date_gmt) is the local publication date of the author converted into the GMT timezone. Therefore, we’ll use the GMT format and with the help of
local method, convert it into our local date/time (“our” means the browser’s local time). Finally, we format the date into a string in the “Month (fully expanded) Day (number), Year (number)” form.
The last thing to do is to render the
Post component into our page (DOM). React provides a handy way of doing that with ReactDOM.render method. The first argument to
render is the React component we want to render (in our case
Post) and the second one is the DOM element on our page. To get a DOM element, we can simply use the old good
'app' as the ID. Once again, we use the JSX syntax to initialize the
Post component, passing all the required props (such as
content, etc) into it.