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?

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?

• javascript
• reactjs
• jsx

• What do you have in your data? And what do you want to print? – Ryan Le Commented Sep 1, 2021 at 10:16
• @RyanLe data is string of characters like "some data here". I already mentioned the required result. – Tales Commented Sep 1, 2021 at 10:17
• Just remove the inner span: this.trimStringLength(data, 136) + 'see more...' – jabaa Commented Sep 1, 2021 at 10:18
• No I want to provide some css to see more text. – Tales Commented Sep 1, 2021 at 10:19

3 Answers 3

Use a Fragment:

E.g.:

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

You can use it like this, no need to use the + sign

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

Seems like you are concatenating a string and an object instead of two strings.

Have you tried replacing the span element with a string, like so ?

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