0
203
ViewsJSX 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.
·
Juan Pablo Isaza
2 answers
Answer question0
<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
</>
·
Juan Pablo Isaza
Report
0
Don't use + operator as it concats JSX with String.
Try ternary only at the place that you want to change like this.
<PencilFill className="mr-10" size={ 10 }/>
{quote.is_archived ? 'View' : 'Edit'}
·
Juan Pablo Isaza
Report
Answer question