CODEWITHSUNDEEP
reactjs
varad
varad

Reputation: 8029

React render nested component

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.

Upvotes: 2

Views: 885

Answers (1)

Rick Runyon
Rick Runyon

Reputation: 4354

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>
    );
  }
}

Upvotes: 2

Related Questions