JSX inside ternary not returning desired result

The problem:

I am trying to return an icon along with text if a ternary is true, and just text if ternary is false. Here is my code:

{quote.is_archived ? <PencilFill className="mr-10" size={ 10 }/>  + 'View' : 'Edit'}

When I do that, this is what I get, can someone point me to why this is happening.

>Solution :

<PencilFill className="mr-10" size={ 10 }/> + 'View'

The first part of this is an object, and the second part is a string, so when you concatenate them together you get [object Object]View. What you probably meant to do was a Fragment, as in:

<React.Fragment>
  <PencilFill className="mr-10" size={ 10 }/>
  View
</React.Fragment>

Or using the shorthand notation:

<>
  <PencilFill className="mr-10" size={ 10 }/>
  View
</>