How to render element based on data from FaunaDB in Next.js

Question

I'm trying to render different elements based on the users' job profile status. I'm using FaunaDB with useSWR to fetch the data, and I'm getting the following object back when doing a console.log(userData):

jobProfile: {status: 'active'}

I'm importing and calling a function named profileStatusIndicator(userData) on a page with the userData as a parameter.

export const profileStatusIndicator = (userData) => {
  console.log(userData) //returns object: jobProfile: {status: 'active'}  
  const profileStatus = (status) =>
    userData?.jobProfile?.status?.includes(status)
  console.log(profileStatus) //returns nothing 

  if (profileStatus("active")) return active
  if (profileStatus("occupied")) return occupied
  if (profileStatus("inactive")) return inactive

  const active = (
    <>
      <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-green-400 ring-2 ring-white" />
    </>
  )

  const occupied = (
    <>
      <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-yellow-400 ring-2 ring-white" />
    </>
  )

  const inactive = (
    <>
      <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-gray-400 ring-2 ring-white" />
    </>
  )
}

Doing a console.log(userData) returns the object. If I do a console.log(profileStatus) it does not return anything in the console.

Can you spot what I'm doing wrong?

Answer 1

My initial solution was to implement a switch statement in the profileStatusIndicator function:

 const profileStatus = userData?.jobProfile?.status

  const profileStatusIndicator = (profileStatus) => {
    switch (profileStatus) {
      case "active":
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-green-400 ring-2 ring-white" />
        )
      case "inactive":
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-gray-400 ring-2 ring-white" />
        )

      case "occupied":
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-yellow-400 ring-2 ring-white" />
        )

      default:
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-gray-400 ring-2 ring-white" />
        )
    }
  }

I then called the function where I wanted it to show.