JavaScript Dictionary

One way of conditionally display data / components would be like this:

if (status === 'ONLINE') {
  return (
    <>
      <span className="green" />
      <span>You're now online!</span>

      <span>Want to logout? Click here</span>
    </>
  )
} else {
  return (
    <>
      <span className="red" />
      <span>You're offline!</span>

      <span>Want to login? Click here</span>
    </>
  )
}

This is fine, although adding more statuses can be tricky and will also make our code messy. One thing I like to use in these scenarios are dictionaries.

You'll see it'll also be much easier to add more status:

const statuses = {
  ONLINE: {
    color: 'green',
    greeting: `You're now online!`,
    auth: `Want to logout? Click here`,
  },
  OFFLINE: {
    color: 'red',
    greeting: `You're offline!`,
    auth: `Want to login? Click here`,
  },
}

const statusData = statuses[status]

return (
  <>
    <span className={statusData.color} />
    <span>{statusData.greeting}</span>

    <span>{statusData.auth}</span>
  </>
)

Much cleaner in my opinion. And adding a new status is much easier:

const statuses = {
  ONLINE: {
    color: 'green',
    greeting: `You're now online!`,
    auth: `Want to logout? Click here`,
  },
  OFFLINE: {
    color: 'red',
    greeting: `You're offline!`,
    auth: `Want to login? Click here`,
  },
  AWAY: {
    color: 'orange',
    greeting: `You're away!`,
    auth: `Want to logout? Click here`,
  },
}