CODEWITHSUNDEEP
javascriptreactjsjsx
user7120923
user7120923

Reputation: 55

How to show a component and a variable within the true case in a ternary in React/jsx?

I want to do a ternary inside of a div that renders a component I’ve built and a variable vs. a button, but my syntax is throwing an error. Does anyone know how I can alter this so that it does what I want?

<div>
{thing ? <WorkListBadge /> item.resource : <button> Click Me 
</button> } 
</div>

It’s erroring on the <WorkListBadge /> part with Module build failed: SyntaxError: Unexpected token, expected :

I tried a bunch of different jsx variations with no luck. This is within a jsx file.

I'm new to React and could totally be going about this the wrong way as well. Thanks in advance!

Upvotes: 0

Views: 103

Answers (1)

Andrew
Andrew

Reputation: 7545

You can only render a single entity in a ternary. Wrap both of your elements in a <div> to combine them into a single item. Remember to add curly braces for item.resource

 <div>
{thing ? <div><WorkListBadge /> {item.resource}</div> : <button> Click Me 
</button> } 
</div>

Upvotes: 3

Related Questions