ReactJS rendering [object Object] when I try to use backticks and map through my array of objects

Question

I am using a BlueprintJS button and my code look something like this:

<Button
    text={`${user.name} (${user.invoicesCount?.unresolved ?? 0}) 
            ${user.resolvingUsers.length > 0 ? "| " +
            user.resolvingUsers.map((u: any) => {
                            return u.name;
                          }).join(", ")
                      : "" }`}
/>

I want to wrap the user.resolvingUsers.map() in a span tag so I could style it. I tried to wrap it as such:

<Button
    text={`${user.name} (${user.invoicesCount?.unresolved ?? 0}) 
            ${user.resolvingUsers.length > 0 ? "| " +
            <span>
                {user.resolvingUsers.map((u: any) => {return u.name;}).join(", ")}
            </span>
                      : "" }`}
/>

However, this return me a [object Object] and I am not sure why this is happening. I thought that by using join(), it would be converted into string?

Answer 1

It depends if your Button text prop accepts Elements but it would be something like:

  text={<div>
      {`${user.name} (${user.invoicesCount?.unresolved ?? 0})`}
      {user.resolvingUsers.length > 0 ? (
        <>
          <span> | </span>
          <span>{user.resolvingUsers.map((u) => u.name).join(", ")}</span>
        </>
      ) : (
        0
      )}
    </div>}