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
Post a Comment