We help IT Professionals succeed at work.
Troubleshooting Question

connect to wordpress json with react

23 Views
Last Modified: 2020-11-18
Hello,
I am tryign to learn React and i thought a good way to do it would be to rewrite a wordpress site using react (so i dont lose 10 years of SEO and content)

On my first step trying to connect to the JSON file I am getting an error

Unhandled Rejection (TypeError): json.data is undefined
Connect/</<
src/index.js:11
   8 | const [posts, setPosts] = useState([]);
   9 | 
  10 | useEffect(() => {
> 11 |    fetch("https://www.justinblayney.com/wp-json/wp/v2/posts")
     | ^  12 |    .then(res => res.json())
  13 |    .then(json =>
  14 |        setPosts(json.data.children.map(c => c.data ))

My code:

import React, { useState, useEffect } from 'react';
import ReactDom from 'react-dom';


function Connect() {
    

    const [posts, setPosts] = useState([]);
    
    useEffect(() => {
        fetch("https://www.justinblayney.com/wp-json/wp/v2/posts")
        .then(res => res.json())
        .then(json =>
             setPosts(json.data.children.map(c => c.data ))
              )
         });
        
    
    return (
    <ul>
        {posts.map(post => (
         <li key={post.id}>{post.title}</li>
        ))}
        </ul>
        
    );
    
    
}



ReactDom.render(
<Connect />, document.querySelector('#root'))

Comment
Watch Question

Francisco IgorSoftware Developer
CERTIFIED EXPERT
/posts is a simple json array, so you can just use:


    setPosts(json)
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Hey there,

Pretty sure your json variable is just an array of Post Objects, so you don't have a data property. Try to console log it and see what you get:

.then(json => console.log(json))

Open in new window

@Francisco 
When I change that i get a new error

Error: Objects are not valid as a React child (found: object with keys {rendered}). If you meant to render a collection of children, use an array instead.

@Chris, this is in my console (without Fransisco's code)
Uncaught (in promise) TypeError: json.data is undefined    Connect index.js:11
index.js:11


One more piece of into, this is copied from a Connect to Reddit tutorial which works fine, i just changed my URL to my Wordpress site
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Hey,

In my example, there should be no call to data - you're just dumping json, so double check the code you have:

fetch("https://www.justinblayney.com/wp-json/wp/v2/posts")
    .then(res => res.json())
    .then(json =>
        console.log(json)
    )

Open in new window

As for the example regarding Reddit, it's highly likely that the Reddit API returns data in an entirely different format to the WordPress one. What I do know (and Francisco said) is that WordPress doesn't wrap it's data into a data property.
Software Developer
CERTIFIED EXPERT
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Chris, this is the console..

src/index.js  Line 8:16:  'setPosts' is assigned a value but never used  no-unused-vars webpackHotDevClient.js:138

Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Yep - that confirms exactly what I said - the response from WordPress is just an array :)
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019
Big Tip: If you're trying to keep 10x years of SEO traction... you'll never rewrite the site at all.

Certainly not to... learn some other tech...

You'll likely have some minor breakage somewhere, that will destroy your SEO traction.
Im sure you are correct, but I need to make sure that the best indexed pages stay indexed, but mostly I have many good posts and content, I dont want to throw it all away..   I think this is also what they call headless CMS, where I can take my app/website and fit to to any datasource and vice/versa.. This will give me a good way to learn it and then sell the service with an example.  I think many companies will like the idea of being able to keeo their Wordpress content and the CMS portion of it and then create apps out of it


Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions