How to append a string and html tag in ternary operator condition?

I have a ternary condition in React

return <span>
    {
        data.length > 136
            ? this.trimStringLength(data, 136) + (<span>see more...</span>) 
            : data
    }
</span>;

Here, this.trimStringLength provides a trim string. The result should be “some data here see more…” but I am geeting “some data here[object Object]”

How can I concatenate to get the required result?

Answer

Use a Fragment:

E.g.:

<span>
  {data.length > 136
    ? <>{this.trimStringLength(data, 136)} <span>see more...</span></>
    : data}
</span>