Assigning data to variables in React

Question

I'm working with React and actual live data from a database for the first time. I'm using fetch as outlined in this article and that's working fine. I've been able to get data received from a php file to print into react.

I've run now into trouble because React kind of stopped making sense. Some variables will work just fine, while others that use the exact same data will not.

For example: Given this array of objects

I can just do this to assign it to a variable:

var posts = this.props.postData.map(function(entry, index){
            return <li>{entry.post_title}</li>;
          })

And it will output just fine to this:

However, in the same function as the above, if I wanted to assign a specific string from the object to a variable, suddenly react will tell me the object is undefined.

var singlepost = <span>{this.props.postData[0].post_content}</span>

var singlepost = this.props.postData[0].post_content;

and even:

var singlepost = this.props.postData[0];
return (
    <div>{singlepost.post_content}</div>
)

Will result in this:

No matter what I try React keeps telling me it's undefined, even though if I console.log the object right before using it its content will show in the console just fine. As soon as I specify the string I want, I will get an undefined error.

Is there a specific of doing this?

Your first example (working) uses `postData` and all the other examples (non-working) use `menuData`...? — Andy, Oct 25 '18 at 09:59
can u put console for this.props.menuData[0] and check whether it receives the values — Nidhin Kumar, Oct 25 '18 at 10:00
In the screenshot it clearly says `menuData`. It's no good if your example here is `postData` and your _actual code_ is `menuData`. — Andy, Oct 25 '18 at 10:01
Maybe you are trying to use response from server before it has actually returned from server? Maybe you can provide minimal example instead of few lines of random code? — Justinas, Oct 25 '18 at 10:02
You mean write that into console? It won't display anything because of "this.props" — lpetrucci, Oct 25 '18 at 10:02
What will be the postData initially? it might be an empty array and you are trying to access the index that is not present initially. — Vikram Singh, Oct 25 '18 at 10:03
It is an empty array initially. Is that what's causing the problem? How do I get around that? Also postData and menuData are the same object, sorry for the confusion — lpetrucci, Oct 25 '18 at 10:05

Kenzk447 · Answer 1 · 2018-10-25T10:15:14.180

0

Maybe postData in first render is empty array. Just Add condition to render :

if(!this.props.postData.length) {
    return null;
}

var singlepost = this.props.postData[0];
return (
    <div>{singlepost.post_content}</div>
);

I prefer to do this way because get invalid cases out of the way first give code more clean.

edited Oct 25 '18 at 10:15

answered Oct 25 '18 at 10:07

Kenzk447

525
2
7

score 0 · Answer 2 · answered Oct 25 '18 at 10:08

0

you can do something like this

var singlepost = this.props.postData[0];
let post = null;
if(singlepost){
  post = <div>{singlepost.post_content}</div>
}
return (
    post
)

answered Oct 25 '18 at 10:08

Vikram Singh

924
1
9
23

Andy · Accepted Answer · 2018-10-25T10:16:13.107

0

If your array is empty initially you need to check for that. You can do that with length:

if (this.props.postData.length) {
  const { post_content } = this.props.postData[0];
  return <div>{post_content}</div>;
}
return <div>No data</div>;;

edited Oct 25 '18 at 10:16

answered Oct 25 '18 at 10:09

Andy

61,948
13
68
95

score 0 · Answer 4 · answered Oct 25 '18 at 10:18

You could also better your null check this way. It is a bit more verbose, but I appreciate the safety of it. It's also a bit of duplication

if (this.props.postData && this.props.postData.length > 0) {
  // Do your computation here
}

Let me know if this meets your needs!

Assigning data to variables in React

4 Answers4