A unique way to do conditional rendering within a React component

Conditional rendering is really what React is all about – Each component reacts to the state updating and as a result, we as developers want to render certain elements to the DOM based on these state changes. Enter conditional rendering.

There are many different ways of implementing conditional rendering within React components (The tried and true if/else statement, a switch statement, etc.) But I recently came across and interesting (And very concise) way to conduct conditional rendering that I wanted to share as a reminder to my future self:

import React, { useState } from 'react'

const MyComponent = () => {

  let [displayText, setDisplayText] = useState(false)

  let hidden = "This is some hidden text"
  let active = "YOU'VE CLICKED THE BUTTON!"

  return(
    <Button onClick={ () => setDisplayText(true)>Press me</Button>
    {
      {
        true:hidden,
        false:active
      }[displayText]
    }
  )
}

You can implement a plain old Javascript object (POJO) in order to get the job done. Whatever you pass into the array is what determines gets displayed.