WordPress with React: Saving and Using Data Collected with fetch - wordpress

Question

I am trying to do a hopefully basic thing with react, which is access an endpoint created by my locally installed WordPress website so that I can use that data and render it in a way I like.
I am trying to set the state to the data but alsough it can be printed to the console in the componentWillMount() function, the state posts remains empty. I can console.log the data from that function but I cannot set the state and then use it in the render function. My code is below:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentWillMount() {
const theUrl = "http://localhost:8888/test-site/wp-json/wp/v2/posts";
fetch(theUrl)
.then(response => response.json())
.then(response =>
this.setState({
posts: response
})
)
}
render() {
console.log('render posts: ' + this.state.posts);
return (
<div>
<h1>React Widget</h1>
<p>posts:</p>
</div>
);
}
}
Widget.propTypes = {
wpObject: PropTypes.object
};
Console:
JQMIGRATE: Migrate is installed, version 1.4.1
react-dom.development.js:21258 Download the React DevTools for a better development experience: https://.me/react-devtools
react-dom.development.js:21258 Download the React DevTools for a better development experience: https://.me/react-devtools
Widget.jsx:28 render posts:
jquery.loader.js:2 running on http://localhost:8888/test-site/
Widget.jsx:28 render posts: [object Object],[object Object],[object Object],[object Object]
the second to last line in the console has a collapse arrow next to it and I can see that those are in fact the posts with all of their correct information. Why can I not set the state to the data being returned by fetch()?

Answer 1

React has a special function setState() to set a components state (for class components). So instead of a direct assignment
this.state = {
value: 'foo2',
posts: data.value,
};
use
this.setState({
value: 'foo2',
posts: data.value,
})
.
This results in the following code. Also, your fetch belongs into the componentDidMount() function (I missed that in my first draft).
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
fetch("http://localhost:8888/test-site/wp-json/wp/v2/posts")
.then(data => data.json())
.then(data => this.setState({posts: data.value}))
}
render() {
return (
<div>
<p>value: {this.state.posts}</p>
</div>
);
}
}
For this special example, you might also want to use functional components with a useState() and a useEffect hook:
export default function Widget() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch("http://localhost:8888/test-site/wp-json/wp/v2/posts")
.then(data => data.json())
.then(data => setPosts(data.value))
});
return (
<div>
<p>value: {posts}</p>
</div>
);
}