react conditionally render JSX

Here I’m creating a local variable persons inside the App class then assigning a JSX to it based on some condition and then passing it({persons}) inside render() method.

let persons = null;

if (this.state.showPerson) {
 persons = (
<div>
  <RenderPerson 
    name={this.state.customers[0].name} 
    age={this.state.customers[0].age}  />

  <RenderPerson 
    name={this.state.agents[1].name}
    age={this.state.agents[1].age} />

</div>
 );
}

I’m getting a compilation error at let showPersons = null;. In VS code if I hover over the red marked line of let keyword it says: [js] Unexpected token. A constructor, method, accessor, or property was expected.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You can do what Carlo suggests in his post. However, you probably don’t need the persons variable at all. So if you don’t need that variable elsewhere in your app, consider the following solution:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPerson: false
    }
  }
  render() {
    return (
      {this.state.showPerson && <div>
        <RenderPerson 
          name={this.state.customers[0].name} 
          age={this.state.customers[0].age}
        />
        <RenderPerson 
          name={this.state.agents[1].name}
          age={this.state.agents[1].age}
        />
      </div>}
    );
  }
}

The syntax above is called a short-circuit evaluation:

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

  • false && (anything) is short-circuit evaluated to false.
  • true || (anything) is short-circuit evaluated to true.

In your app, this means:

  • If this.state.showPerson is false, then false && JSX = false, which renders nothing.
  • If this.state.showPerson is true, then true && JSX = true, which renders your JSX.

Alternatively, you can also use a ternary expression:

condition ? expr1 : expr2

If condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2

Which in your app would be:

return (
  {this.state.showPerson ? <div>
    <RenderPerson 
      name={this.state.customers[0].name} 
      age={this.state.customers[0].age}
    />
    <RenderPerson 
      name={this.state.agents[1].name}
      age={this.state.agents[1].age}
    />
  </div> : null}
);

But I personally prefer the former solution.

Solution 2

You are probably doing something like this

class App extends React.Component {
  // ...
  let persons = null;
  // ...
}

while you should do

class App extends React.Component {
  constructor(props) {
    super(props);
    this.persons = null;
  }
}

See more about the class syntax here https://babeljs.io/learn-es2015/#classes

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply