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 ternary expression should be as follows:
{ pov === "visitor" ? <VisitorPOV/> : <OwnerPOV/>}
I don't need to explain @Crice did explain it in his comment.