React render nested component

Question

In the return method of my react component I want to have check to async function and return only if satisfied. This is my code:

render() {
      var data = new MyClass()
      data.helper(function(response){
         if(response.status === "authorised"){
           return (
              <div>
               <List videos={videos}/>
             </div>
            )

          }else{
            return (
              <div>
               <p>Please wait</p>
             </div>
            )
          }
       })


    }

But this way it is giving me error saying:

A valid react component must be returned. You are returning either array or list or undefined

I want to show the data only after my logic.

Rick Runyon · Accepted Answer · 2016-03-07 04:09:41Z

2

I suggest moving the AJAX call to the componentDidMount lifecycle method so the request fires when the DOM node is mounted, and then conditionally setting an authorised property on the state, contingent on a successful response. Then use this state property to conditionally render your different UI states in the render method:

class MyComponent extends React.Component {
  constructor() {
    super();

    this.state = { authorised: false };
  }

  componentDidMount() {
    var data = new MyClass();
    data.helper((response) => {
      if (response.status === "authorised") {
        this.setState({ authorised: true })
      }
    });
  }

  render() {
    if (this.props.authorised) {
      return (
        <div>
          <List videos={videos}/>
        </div>
      );
    }
    return (
      <div>
        <p>Please wait</p>
      </div>
    );
  }
}

edited Mar 7, 2016 at 4:09

answered Mar 7, 2016 at 4:03

Rick Runyon

4,3641 gold badge19 silver badges15 bronze badges

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

4 Comments

David L. Walsh Over a year ago

The data.helper argument needs to be an arrow function (or a function with a bound this) in order to use this.setState().

varad Over a year ago

what if I use componentWillMount instead componentDidMount. I want to check before render

Rick Runyon Over a year ago

I've tried that approach and others' have documented it here on SO. The problem with performing AJAX in componentWillMount is that there's no guarantee that the asynchronous call complete by the time the method returns and the node is mounting. Depending on how you've organized your state this could cause your component to attempt to render using unset state (your authorised property might be still be false in this case).

Rick Runyon Over a year ago

One thing you could do is instead of returning <p>Please wait</p>, return null instead and nothing will render until the auth call is successfully completed.

Collectives™ on Stack Overflow

React render nested component

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related