CODEWITHSUNDEEP
javascripttypescriptjsx
c0rnelia
c0rnelia

Reputation: 23

Show Checkboxes based on a Condition in JSX

I am new to JSX and my task for this week is to hide the checkbox whenever a certain condition is true. The conditions are when an account is logged in, the checkboxes shouldn't be visible on that account.

The code below is the code for the checkboxes and its condition:

<TableRow>
            {!isOpsAdmin || !isOmiAdmin || !isRider || !isRunner && (
              <TableCell padding="checkbox">
                <Checkbox
                  // eslint-disable-next-line no-console
                  onChange={() => console.log("checked all")}
                />
              </TableCell>
            )}

Right now, the checkboxes are only hidden when I login on the isOpsAdmin account, but whenever I try logging in on the other accounts (isOmiAdmin, isRider, isRunner), the checkboxes would be visible and that is not the expected result. Can anyone help as I'm very new to JSX therefore your help will be very much appreciated.

Upvotes: 0

Views: 47

Answers (1)

catzilla
catzilla

Reputation: 1981

I think you might want to update the logic condition for showing the checkbox:

!(isOpsAdmin || isOmiAdmin || isRider || isRunner) && ...

this condition will be false if any of the conditions are true.

you might also want to consider using the html hidden attribute like:

  <TableCell 
     padding="checkbox"
     hidden={isOpsAdmin || isOmiAdmin || isRider || isRunner}
  >
    <Checkbox
      // eslint-disable-next-line no-console
      onChange={() => console.log("checked all")}
    />
  </TableCell>

You can either hide the cells itself, or just use the hidden attribute inside the Checkbox component if you just want to hide the checkbox

Upvotes: 2

Related Questions