Demystifying Conditional Rendering in ReactJS

In React, you can create distinct components that can elaborate the desired behavior. You can render only some of them, depending on the state of your application.
Conditional Rendering works exactly as it does in JavaScript. Use Conditional Operators to create elements representing the current state, and let React update the UI.

function UserGreeting(props) {
     return <h1>Welcome Back!</h1>
}

function GuestGreeting(props) {
     return <h1>Please sign up.</h1>
}

Consider these two components

We'll create a Greeting component that will display either of these depending upon the condition.

function Greeting(props) {
     const isLoggedIn props.isLoggedIn
     if (isLoggedIn) {
          return <UserGreeting />
     } else {
          return <GuestGreeting />
     }
}

const root = ReactDOM.createRoot(document.getElementById('root'))
// Try changing to isLoggedIn={true}
root.render(<Greeting isLoggedIn={false} />)

When isLoggedIn={false}, the output will be Please sign up..
When isLoggedIn={true}, the output will be Welcome Back!.

You can use variables to store elements. This can help you conditionally render a part of the component without changing the rest of the output. Consider these two components representing Logout & Login buttons.

// Login Button
function LoginButton(props) {
     return (
          <button onClick={props.onClick}>
               Login
          </button>
     )
}

// Logout Button
function LogoutButton(props) {
     return (
          <button onClick={props.onClick}>
               Logout
          </button>
     )
}

Let's create a component that holds some state, i.e. stateful component and name it LoginControl. This will render OR depending on it's current state and from the previous example.

class LoginControl extends React.Component {
     constructor(props) {
          super(props)
          this.handleLoginClick = this.handleLoginClick.bind(this)
          this.handleLogoutClick = this.handleLogoutClick.bind(this)
          this.state = {isLoggedIn: false}
     }

     handleLoginClick() {
          this.setState({isLoggedIn: true})
     }

     handleLogoutClick() {
          this.setState({isLoggedIn: true})
     }

     root.render(<LoginControl />)

     render() {
          const isLoggedIn = this.state.isLoggedIn
          let button
          if (isLoggedIn) {
               button = <LogoutButton onClick = {this.handleLogoutClick} />
          } else {
               button = <LoginButton onClick = {this.handleLoginClick} />
          }

          return (
               <div> 
                    <Greeting isLoggedIn = {isLoggedIn} />
                    {button}
               </div>
          )
     }
}

Excercise

Run the above code and see what the result is.
Believe me, you will love it 💖