How to load components conditionally in ReactJS

Question

This is from a new starter of ReactJS. Unavailability of easily graspable resources has prompted me to knock at SO again. The issue is this. I have a React Component namely, RegisterAccount which when clicked shoots another component (a pop-up) allowing users to fill in the required details to register an account. Now once an account is successfully registered, I want to add the registered account as another component under RegisterAccount. How can I have this communication set up?

//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component

Answer 1

I'm new to React. I was also finding how. and I saw this article! It says like belows

render : function()
{
    return (
        <div>
        { true && <AddAccount /> }
        { false && <AccountAdded /> }
        </div>
    );
}

Answer 2

If I understand your question correctly, you are trying to update which component to display when the state changes (e.g. the user creates an account), with that state being altered by a child component. Here is a basic example showing child -> parent communication.

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).

jsfiddle of this example

/** @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);

Answer 3

You can also do the following and depending on the property condition returning true or false you can render or not. This is just an example, the condition might as well come from a method etc etc..:

export class MyClass extends React.Component{
    ...
    render(){
            <div>
                <img src='someSource' />
                {this.state.condition ? <MyElement /> : null}
            </div>
    }
}

you can also find more detailed information here.

Answer 4

In your render function you can have a variable with your tag that is conditionally displayed...sort of like this:

render: function(){
   var conditionalTag;
   if(conditionalTag)   <AccountAdded/>

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

conditionalTag will only be rendered if the variable has jsx in it