JSX inside ternary not returning desired result

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