const myFunction = (props) => {
let myCondition = false;
console.log('-----****----',props);
if(props && props.isAllowed) {
myCondition = true;
}
if(someOtherCondition) {
return(
<li><Link className="vx_globalNav-links" to="#">Policies</Link>
<ul>
<li><Link className="vx_globalNav-links" to="/my-policy">My Policy</Link></li>
{ myCondition && (<li><Link className="vx_globalNav-links" to="/condition-policy">Condition Policy</Link></li>)}
</ul>
</li>
);
}
return null;
};
The above code seems to be not working for condition based link to display on UI for "Condition policy" even though I get "true" for "myCondition" in the console log which is just logged before the return statement. Wondering What's wrong here. Any help is really appreciated.
It looks like you put a statement immediately after your if() statement, and so your block of code within { ... } is not executed as part of your if statement.
if(someOtherCondition)
console.log('', myCondition);
{
return(
The curly braces must follow immediately after the if() statement, otherwise, as it is in this case, the console.log is executed when someOtherCondition is true. And whatever is within { ... } is executed anyway regardless.
Your if statement syntax is wrong
Please check the below link, If you are something is not right, then please comment.
{ just after the if statement, then the rest of the code does not depend on the condition.