React Render Is Choking On Nested Object In Property

I have this react component. It is passed a prop called data. data is an object like { 'title' : 'some title', 'meta' : { 'name': 'frank', 'last': 'lee'

Solution 1:

It looks as though data is not necessarily set before render fires. Since you set an initial (empty) data property, when you call this.props.data.title on the initial render, the value is null but it doesn't blow up because the object is sufficiently shallow. However, calling name on an empty meta property blows up, because meta doesn't exist.

You've set loadData to use a promise, but that promise doesn't prevent the initial render of the component, where the error is occurring. Your best bet is to either render nothing until this.props.data.meta has a value, or else hedge your name variable, eg.

const name = this.props.data.meta && this.props.data.meta.name;

This will likely still flash undefined, though it won't blow up.

Solution 2:

This is a very wild guess.. but what about a coma after the title value?