0

I'm pulling in data from an API and trying to display it on my bootstrap table. It displays but I'm getting some errors. The first issue is in regard to 'data' being required. Error message

The second issue seems to be the data hasn't loaded in time but I've used an if statement to load the data first. 

    if (this.props.dataState.loaded){
         data = this.props.data.content;
        } else {
          this.renderLoading();
        }
    return( ...

Issue 2 - cannot read property length of undefined

Sometimes it displays the page without issues, other times it effects the other components and they won't load. I always get the console errors. Any idea what I'm doing wrong?

Thanks!

Gearóid
  • 179
  • 1
  • 3
  • 11

1 Answers1

0

You need to check the existence of dataState too, the same way you are checking for dataState.loaded. For the below code, I am assuming the default Props type for data.content is an array.

Try this:

if (this.props.dataState && this.props.dataState.loaded){
         data = this.props.data.content ? this.props.data.content : [] ;
} else {
          this.renderLoading();
       }

I hope this will work.

Vikas Yadav
  • 3,094
  • 2
  • 20
  • 21
  • Thanks for your input Vikas but I'm still getting the same error " error TypeError: Cannot read property 'length' of undefined" even though the data is pulled into the table. – Gearóid May 14 '18 at 14:59
  • Could you please write the complete code so that I can have a look at it? – Vikas Yadav May 15 '18 at 05:56