React: Delay rendering of JSON data?

Question

I have the following React class. At first, the console will print an empty array {}, which will return the empty div. However, half a second later the console will print the correct values - but the empty div remains. How should I change the class to properly load the JSON?

var TableData = React.createClass({

    render: function() {
        console.info(JSON.stringify(this.props.summary));

        if (!this.props.data || !this.props.summary) {
            return <div>Loading name table..</div>
        }

        var summary = this.props.table;

        var nameTable =  summary.nameTable;
        var nameTableArr = Object.values(nameTable);
        return ( // A table is returned here, works with the same data structure as is present in the JSON

If I go to the console, the console.info prints an empty JSON string {} initially, which correctly returns the "loading names table..." div. However, data is printed in the console half a second later, but it never proceeds to go out of the if statement and populate the table.

It works if I change the nameTable var to include "manual" data, so it must be something with rendering the server-side data that's delayed half a second.

How could I change the above class to delay rendering for, say, 1 second and then populate the table? It would work in that case I suspect.

Removing the if statement results in Uncaught TypeError: Cannot convert undefined or null to object in the console, which makes sense since the string is indeed empty for half a second.

Michal Takáč · Accepted Answer · 2017-01-12 10:18:58Z

1

Im not a React experienced, but this looks like you have problem with asynchronous behavior.

In order to help you more, Ill need the part of the code where ajax is called.

The whole issue in my opinion is that your code is triggered first when there are no results yet, and after data are loaded it will not trigger again.

So take a closer look at your handling of AJAX async stuff, cause your issue is there.

answered Jan 12, 2017 at 10:18

Michal Takáč

1,0553 gold badges17 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Delay rendering of JSON data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related