1

So I am trying to call the string in section1.text... My console returns:

enter image description here

Here is my JSX:

        return (
            <div>
                <h1>{this.props.article.title}</h1>
                <h2>{this.props.article.subTitle}</h2>
                <h3>{this.props.article.body.section1.text}</h3>
            </div>
        );

Both title and subTitle return fine... but when I try and get the section1.text it returns:

Cannot read property 'section1' of undefined

I looked online and I think it has something to do with it being a nested object, yet I cant get around my problem. Any suggestions?

Any help or advice is appreciated. Thank you in advance?

daniel aagentah
  • 1,672
  • 5
  • 29
  • 56
  • 1
    My guess is that the object doesn't have `body` as of when it's being rendered, but it gets added to it *later*, and you're falling afoul of [`console`'s deferred evaluation](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection) which is tricking you into thinking `body` is there. – T.J. Crowder Mar 15 '17 at 15:55
  • Is it `this.props.article.body` or `this.props.article.article.body`? – Koala Yeung Mar 15 '17 at 15:56
  • @KoalaYeung: In that case, he'd be getting the problem on `this.props.article.title`. – T.J. Crowder Mar 15 '17 at 15:56
  • I am declaring a connect variable from my redux store using 'store.article.article' and then calling its attributes in my jsx with 'this.props.article.subTitle' @KoalaYeung – daniel aagentah Mar 15 '17 at 15:57
  • Like I said, it returns title and subTitle with NO problems, I think the problem lies in how I am calling body.section1.text it within my JSX – daniel aagentah Mar 15 '17 at 15:57
  • Did you map `article` with `mapStateToProps` in your `connect` call? – Koala Yeung Mar 15 '17 at 16:03
  • All I have used is @connect((store) => { return {article: store.article.article, fetching: store.article.fetching}; }) – daniel aagentah Mar 15 '17 at 16:04
  • @KoalaYeung see above – daniel aagentah Mar 15 '17 at 16:04
  • Did you try `console.log(this.props.article)` in your render function? The error seems to state that `this.props.article.body` is `undefined`. What is the structure of `article` that is actually received in render? – Koala Yeung Mar 15 '17 at 16:07
  • (P.S. Last time I encountered similar issue, I had a typo in my code.) – Koala Yeung Mar 15 '17 at 16:07
  • I agree with @T.J.Crowder. Your console output isn't guaranteed to reflect your `props` on initial render. It can actually update in the meantime, unless you specifically console that property and not the tree. Do your console.log and then immediately after add a line: `debugger`. This will ensure that the output in the console doesn't change. OR do `console.log(this.props.article.body)`. What do you see? – Chris Mar 15 '17 at 16:08
  • I logged the article.body on render, it still returns the properties correctly @Chris – daniel aagentah Mar 15 '17 at 16:18
  • @KoalaYeung the console log image I attached in the question is the result of redux's fetched data from my sever, like I said, it returns all my other properties fine, just not the ones nested deeper in the objects. – daniel aagentah Mar 15 '17 at 16:22
  • @danjonescidtrix we can't find the problem without more code. But from what I get from your code above, is that you are returning a loader till the fetch is done, right? and then you are showing the article. In that case I would suggest to share your initial state of the reducer, if the body is there, then it will never be undefined. In that case, share your action and reducer. – Johnny Klironomos Mar 15 '17 at 17:16
  • The react debugger output does not help figure out why props.article.body went undefined. I suggested to directly add a console.log statement into your component's render function. That is not what displayed in your image at all. – Koala Yeung Mar 15 '17 at 17:49

2 Answers2

0

Use Google Chrome and the "React Tools" Chrome Extension to inspect the state of your component at run-time.

Josh Wulf
  • 4,727
  • 2
  • 20
  • 34
0

Is finally text shown on page? If yes I suspect that Your initial state has no section1 field, so before first render it's empty. I had similar issue and this is outcome from my case, maybe Yours is same :)

Michal Cholewiński
  • 454
  • 2
  • 14