Want to load components conditionally in ReactJS? In this case, the RegisterAccount component is a root component. If it was a child of another component(s) which also needed to know the hasAccount state used in this example, then the state would likely be better off stored higher up the chain (and passed down as a prop).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /** @jsx React.DOM */ var AddAccount = React.createClass({ handleRegistration: function() { this.props.updateAccount(true); }, render: function() { return <a onClick={this.handleRegistration}>Create my account</a>; } }); var AccountAdded = React.createClass({ render: function() { return <span>Account exists now</span>; } }); var RegisterAccount = React.createClass({ getInitialState: function() { return { hasAccount: false }; }, updateAccountStatus: function(status) { this.setState({ hasAccount: status }); }, render: function() { return ( <div> {this.state.hasAccount ? <AccountAdded /> : <AddAccount updateAccount={this.updateAccountStatus} />} </div> ); } }); React.renderComponent(<RegisterAccount />, document.body); |
Here is jsfiddle of this example
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
