In the last lesson we learn how to render a content dynamically or conditionally and then we simply take an advantage of the fact that everything in render() is javascript.
I also mention in the last lesson that using the ternary expression as we did in div content is not necessarily optimal. If our application grows and as we possibly nest conditions it can be hard to keep track of which expression is responsible for what and to spot into our JSX code.

So there is a cleaner solution for that which I want to show you in this lecture.
So let me remove curly braces contains ternary expression { this.state.showPersons ? ( ... ) : null } so that for the moment all the persons are rendered all the time again. Make sure you only remove expression part not the div part.

Handling Dynamic Content : The JS way

Taking advantage of that , we can add some code in render method before we return() something.
so very first I will declare a variable person set as null (let person = null) Now this should be the default. After that I will add an if(){ ... } statement, I can write the if statement there because I am not inside the JSX code.

...
  render(){
    ....
    const persons = null;
    if(this.state.showPersons){  // Boolean value
      persons = (
        {/* JSX code */}
      );
    }
    return(
    {/* JSX code */}
    )
  }

So we will create a check statement and if the this.state.showPersons is true we will set our newly created variable perons to some JSX code.
After that we will grab the entire div section which we want to show on condition i.e Person component and put inside if condition as given below.

...
  render() {
		const style = { ... };
		let persons = null;
		if (this.state.showPersons) {
			persons = (
				<div>
					<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
					<Person
						click={this.switchNameHandler}
						name={this.state.persons[1].name}
						age={this.state.persons[1].age}
						changed={this.nameChangedHandler}
					/>
					<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
				</div>
			);
		}
		return (
			<div className="App">
				<h1> Heading</h1>
				<button style={style} onClick={this.togglePersonsHandler}>
					Switch Name
				</button>
				{persons}
			</div>
		);
	}
...

So if the condition get value true it will set the JSX code to that variable.
At the end within the single curly braces I can output persons referring to the persons variable which is null by default or if showPersons is true and since render is gets called whenever react check if it needs to re-render this page or that particular component I should say since this happens every time re-render occurs we make sure that we always take the latest state we have into account and even render nothing or the persons because keep in mind one of the two things triggering an update is a state change.
Now with this save your file and run the application in the browser. the behavior will be the same but the code is more elegant.

This is the preferred way of outputting conditional content and its the way I recommend.

React introduction
React Component