Reactjs don't render until variable is ready

Question

I googled and found some relevant answers but they don't seem to be complete. eg. react.js don't render until ajax request finish

One of the answer suggest to put if else in template, and I have the following Loader component doing this:

var LoaderWrapper = function (props) {
    return (
        <div>
            {props.loaded ? props.children :
                <div className="margin-fixer">
                    <div className="sk-spinner sk-spinner-wave">
                        <div className="sk-rect1"></div>
                        <div className="sk-rect2"></div>
                        <div className="sk-rect3"></div>
                        <div className="sk-rect4"></div>
                        <div className="sk-rect5"></div>
                    </div>
                </div>}
        </div>
    )
};

Now if I use this wrapper:

<LoaderWrapper loaded={variable!=null}>
    <MyComponent variable={variable}/>
</LoaderWrapper>

In MyComponent:

render () {
    const {variable} = this.props;
    return (<div>{variable.abc}</div>)
}

Problem is that still complains about variable is null.

Also tried the following, complains about the same thing...

<LoaderWrapper loaded={false}>
    <MyComponent variable={variable}/>
</LoaderWrapper>

Possible duplicate of [How can i block a React component to be rendered until I fetched all informations?](https://stackoverflow.com/questions/35022922/how-can-i-block-a-react-component-to-be-rendered-until-i-fetched-all-information) — Dan O, Jun 18 '19 at 01:38

score 0 · Answer 1 · answered Jun 18 '19 at 04:08

You must be doing something wrong, the following code still works and is based on your above idea

import React, { Component } from 'react';
import { render } from 'react-dom';


var LoaderWrapper = function (props) {

  return (
    <div>
      {props.loaded ? props.children :
        <h2> Loading ... </h2>}
    </div>
  )
};

class MyComponent extends Component {
  render() {
    const { variable } = this.props;
    return (<div>{variable.abc}</div>)
  }
}

class MyApp extends Component {
  constructor() {
    this.state = { loaded: false };
    this.changeLoading();
  }

  changeLoading() {
    setTimeout(() => {
      this.setState({
        loaded: true
      })
    }, 2000)
  }
  render() {
    return (
      <LoaderWrapper loaded={this.state.loaded}>
        <MyComponent variable={{ abc: 'This is news' }} />
      </LoaderWrapper>
    )
  }

}

render(<MyApp />, document.getElementById('root'));

Please see here for working example https://stackblitz.com/edit/react-q6wynn?file=index.js

Reactjs don't render until variable is ready

1 Answers1