Conditional Statement in JS is not working in the below code-CodePudding

const myFunction = (props) => {
  let myCondition = false;
  console.log('-----****----',props);

  if(props && props.isAllowed) {
    myCondition = true;
  }
  
  if(someOtherCondition)
    console.log('', myCondition);
  {
    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.

CodePudding user response：

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.

CodePudding user response：

Your if statement syntax is wrong