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?

Are you sure `u.name` is a String? can you please paste the result from logging `text`? — MrBens, Oct 16 '22 at 16:42
From my understanding is that `.join()` should turns the array (produced by `.map()`) into a string. For `text`, the documentation states that it is a `React.ReactNode` with a description of `Action text. Can be any single React renderable.` — Owenn, Oct 16 '22 at 16:56
The [object object] result its due to tag, as cannot be inside template strings on React — Miguel Hidalgo, Oct 16 '22 at 17:07
@MiguelHidalgo So how can I style a string inside template strings? — Owenn, Oct 16 '22 at 17:11

score 1 · Accepted Answer · answered Oct 16 '22 at 17:47

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>}

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

1 Answers1