CODEWITHSUNDEEP
javascriptreactjsjsx
Tales
Tales

Reputation: 303

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?

Upvotes: 1

Views: 1477

Answers (3)

Harshit Rastogi
Harshit Rastogi

Reputation: 2112

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>

Upvotes: 2

Yoshi
Yoshi

Reputation: 54649

Use a Fragment:

E.g.:

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

Upvotes: 8

Sandrow
Sandrow

Reputation: 54

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>

Upvotes: 0

Related Questions