access to the endpoints wp api rest title post rendered inreact app - reactjs

Question

I cracking my head against the wall, I'm developing a React App with wordpress as an API (wp rest API). everything is working well, I'm fetching and rendering all the post but when I go to the single post I can't fetch and render the title and content because it's said {rendered: "dwdwdf"} and I do the {post.title.rendered} as I do in the postlist component to get the title and works but in the single post doesn't.
To make it more clear here is the code:
const id = this.props.match.params.id;
let postUrl = `http://thesite.com/wp-json/wp/v2/posts/${id}`;
fetch(postUrl)
.then(data => data.json())
.then(data => {
this.setState({
item: data
})
})
when I console the this.state.item.title it shows me this:
{rendered: "dwdwdf"}
rendered: "dwdwdf"
__proto__: Object
it should be render as I do in my postlist component, like this {this.state.item.title.rendered} and done ! but not, it gave me this error:
TypeError: Cannot read property 'rendered' of undefined
I checked the api rest wp documentation and a lot of blogs and stackoverflow but I can't find anything that helps me.
if someone can guide me, thanks.

Answer 1

In principle, what you have shown should work. The response of that WP API endpoint does include:
"title": {
"rendered": "Your post's title"
},
This is backed up by your console.log output.
You haven't shown your default state, where your console.log output is written, or where you are trying to access the full path (i.e. {this.state.item.title.rendered}), but it sounds like you are doing at least the full path part in the render function.
Assuming so, I believe what you have is a timing issue. The render function may run as many times as it needs to (i.e. when the component updates). The first time it runs, your state does not have the title property yet, as your HTTP request is not yet complete. It's undefined, and when you try to access a child property of undefined, you get that error.
The difference with your earlier console statement is you aren't trying to access a property of undefined. You are just outputting the state's value itself (i.e., undefined). And one very tricky thing about the console is that it's not a historical record. A value that a console.log shows can change...say from 'undefined' to the value that gets set there later, title property and all. It all happens so fast that you don't see this.
It's best to keep in mind that the render() function may run over and over again, and your JSX needs to be written in such a way that it accounts for the possible states you expect. Here, you can expect that initially your state for "item" does not have all the properties that it will have later.
You could instead write something like,
{this.state.item.title ? this.state.item.title.rendered : 'Loading...'}
Or whatever else you'd like to write there (or leave it blank, etc.). So you are first checking to see if title has a truthy value (not undefined), and if so, accessing the child's property. A common pattern is to use this form:
{this.state.item.title && (<h1>{this.state.item.title.rendered}</h1>)}
Here the difference is we are relying on JavaScript's return value for &&, which will be the second item's value. If the first item is falsy, it doesn't even look at the second part, so it doesn't complain.
Or, you may try to take a step back and track a separate variable in state for your loading process. Something like dataReady, which you would set to true once you receive the HTTP request back. Then, your render code looks a bit cleaner:
{this.state.dataReady && (
<h1>{this.state.item.title.rendered}</h1>
<h2>(some other stuff</h2>
)}
For more information, I recommend you read about conditional rendering.

Answer 2

I'm just guessin but this may be due to your state not having the needed initial conditions to render correctly, since you are loading the info asynchronously.
For example, if your intial state is like this:
this.state = {
item: {},
...anyOtherAttributes
}
and you try to render this.state.item.title.rendered, it won't find title so it'll be undefined and then React won't be able to get the rendered property correctly.
To fix it you should initialize your posts like:
this.state = {
item: {
title: {rendered: ''}
},
...anyOtherAttributes
}
so it has kind of a placeholder to render while waiting for the aynchronous call to end and update the state.
Hope it helps.