reactjs - React render nested component -


in return method of react component want have check async function , return if satisfied. 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 way giving me error saying:

a valid react component must returned. returning either array or list or undefined

i want show data after logic.

i suggest moving ajax call componentdidmount lifecycle method request fires when dom node mounted, , conditionally setting authorised property on state, contingent on successful response. use state property conditionally render different ui states in 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>     );   } } 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -