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

Answer 1

You ternary expression should be as follows:

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

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