React - Conditional Content

From Logic Wiki
Jump to: navigation, search


let conditionalContent = null
if (someThing === true)
conditionalContent =

Visible!

Hello!

  {conditionalContent}

Another Approach

 import React, { Component } from 'react';
 class App extends Component {
    state = { 
        showPersons : false
     }

     togglePersonsHandler = () => {
         const doesShow = this.state.showPersons;
         this.setState({showPersons : !doesShow})
      }

     return (
       <button onClick={this.togglePersonsHandler}>Switch</button>
       { this.state.showPersons ? 
       <div>
         <p>Hello!</p>
          {conditionalContent}
       </div> : null       //-> else 
        } 
     )
  }