React js (jsx) ternary operator not working as required

Question

I've passed a prop - {pov} to a component- Page I also have two other functional components - VisitorPOV and OwnerPOV if pov === 'visitor' , I want to render VisitorPOV Component else OwnerPOV Component Here is what I tried

    function Page({pov}) 
    {
      return (
        <div>
          { {pov} === "visitor" ? <VisitorPOV/> : <OwnerPOV/>}
          </div>
          );
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

But what ever the prop is, it is only rendering false part ie. the component after :

Please help! Thanks

You already have an enclosing {} around the ternary so you are already in a JS expression context rather than jsx. So there is no need to enclose the pov variable with an additional set of braces. In fact doing so creates an object with pov as the key name and the variable value as the value. Since objects are only equal via identity, this will always result in going down the "false" branch of your ternary. In short, just remove the curly braces surrounding pov in your ternary, and it should work. — CRice
– CRice, Commented Apr 25, 2022 at 22:15

Othmani Ali · Accepted Answer · 2022-04-25 22:21:32Z

2

You ternary expression should be as follows:

{ pov === "visitor" ? <VisitorPOV/> : <OwnerPOV/>}

I don't need to explain @Crice did explain it in his comment.

answered Apr 25, 2022 at 22:21

Othmani Ali

3531 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React js (jsx) ternary operator not working as required

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related