meteor - Avoiding If statements in render method -
i new , unfamiliar web development.
in side project keep ending these if
statements in render()
method when trying control render based on different things.
one example...
app = react.createclass({ getinitialstate(){ return {validcode: false}; }, handlesubmit(code){ var result = meteor.call('validatecode', code); this.setstate({validcode: result}); }, render() { if(this.state.validcode){ return ( <div> <h1>valid code!!</h1> <menu /> <othercomponentsonlyvisiblewhenauthorized /> </div> ); } else { return ( <div> <h1>welcome</h1> <invitecodeinput oncodesubmit={this.handlesubmit}/> </div> ); } } });
basically want validate user input. based on that, either want display rest of web page components in normal fashion or continue display input form component.
i feel having if
statement in render darn ugly. have never seen react snippet similar guessing no-no. can familiar react suggest better way?
tbh, don't think matters , i'm sure there heaps of components written this. here example reddit https://github.com/reddit/reddit-mobile/blob/master/src/views/components/listing.jsx
if must take outside of render create method it
app = react.createclass({ getinitialstate(){ return {validcode: false}; }, handlesubmit(code){ var result = meteor.call('validatecode', code); this.setstate({validcode: result}); }, rendervalidpage() { return ( <div> <h1>valid code!!</h1> <menu /> <othercomponentsonlyvisiblewhenauthorized /> </div> ); }, renderinvalidpage() { return ( <div> <h1>welcome</h1> <invitecodeinput oncodesubmit={this.handlesubmit}/> </div> ); } render() { return this.state.validcode ? rendervalidpage() : renderinvalidpage(); } });
Comments
Post a Comment