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

The gist would be the `
{isAccountAdded ? : }
` — this is just JavaScript so you can encode arbitrary logic in you component's render method. — andreypopp, Jan 22 '14 at 10:52
Hi @andreypopp , thanks but am afraid this is not what i want. Say RegisterAccount has an icon which when clicked has to pop-up the component AddAccount and once an account is registered somehow RegisterAccount has to know that a registration has happened (probably from AddAccount) and then it should have the AccountAdded component in it. And this should repeat everytime the icon on RegisterAccount is clicked. How do i set up this communication? — 5122014009, Jan 22 '14 at 11:46

score 29 · Answer 1 · answered Jan 23 '16 at 02:54

29

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>
    );
}

answered Jan 23 '16 at 02:54

Yongnam Jeong

319
3
2

Simple yet effective. There is no need to add inlined styles to hide the Component conditionally. Thanks ;) – yuva Mar 02 '16 at 06:36
1

This is a nice solution, although not an obvious one – BHouwens Aug 18 '16 at 11:05
The `render` function doesn't render variables with `null` so you could write `let yourComponent = null;` and later (in a condition) `yourComponent = ;` then in your `render` just write `{ yourComponent }`. – totymedli Feb 02 '17 at 15:08

score 18 · Answer 2 · answered Jan 23 '14 at 03:00

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

It seems like React.renderComponent( is outdated. Works for me using: ReactDOM.render( instead — mpaepper, Sep 22 '16 at 07:07
@mpaepper Yes. `React.renderComponent` is deprecated. You should `import ReactDOM from 'react-dom';` and use `ReactDOM.render(, document.body);` instead. — totymedli, Feb 02 '17 at 15:02

Red fx · Answer 3 · 2017-09-13T15:24:28.633

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.

score 2 · Answer 4 · answered Sep 08 '14 at 18:01

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

How to load components conditionally in ReactJS

4 Answers4

Linked