I recently encountered a scenario where I needed to use an else if condition with the ternary operator in order to display certain elements based on certain conditions. For example, let’s say you want to see whether the user that is logged in is a manager, a supervisor, or a user, and output their role based on that.

import React from "react";


export default function App() {
  const isManager = false;
  const isSupervisor = true;

  return (
    <div>
      {isManager ? (
        <p>Manager</p>
      ) : isSupervisor ? (
        <p>Supervisor</p>
      ) : (
        <p>User</p>
      )}
    </div>
  );
}