Javascript

How to write conditionals inside return statement in functional componets in react js

admin
Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error How to write conditionals inside return statement in functional componets in react js on this date .

i want to render the page login page if the user in not logged in, if not i want to render the forbidden 403 page

i cant use render() cause im using a functional component

return forbidden === false ? (
    <>
      <Container maxWidth="xs">
        <ThemeProvider theme={customTheme}>
          <Box border={2} className={borderclasses.root} p={3}>
            <Grid
              container
              spacing={3}
              direction="column"
              justify="center"
              alignItems="center"
            >
              <Grid item align="center">
                <Typography variant="h5">Login</Typography>
                <br />
                <Divider style={{ width: "15rem" }} />
              </Grid>

              <Grid item>
                <FormControl required={true}>
                  <FormInput
                    onChange={_handleUsernameChange}
                    label="Username"
                    variant="filled"
                  ></FormInput>
                </FormControl>
              </Grid>

              <Grid item>
                <FormControl required={true}>
                  <FormInput
                    onChange={_handlePasswordChange}
                    label="Password"
                    variant="filled"
                  ></FormInput>
                </FormControl>
              </Grid>

              <Grid item>
                <Collapse in={loginError != ""}>
                  <Alert
                    severity="error"
                    onClose={() => {
                      setLoginError("");
                    }}
                  >
                    {loginError}
                  </Alert>
                </Collapse>
              </Grid>

              <Grid item>
                <Button
                  variant="contained"
                  style={customTheme.palette.buttonColor}
                  onClick={_handleLoginButtonClicked}
                >
                  Login
                </Button>
              </Grid>

              <Grid item>
                <Divider style={{ width: "15rem" }} />
                <br />
                <Typography variant="caption" className={textClass.root}>
                  Don't have an account?
                  <Link
                    href="/signup"
                    className={linkClass.root}
                    color="primary"
                    underline="hover"
                  >
                    &nbsp;Create one
                  </Link>
                </Typography>
              </Grid>
            </Grid>
          </Box>
        </ThemeProvider>
      </Container>
    </>
  ) : (
    <Forbidden403Page />
  );

i set the state of forbidden using useEffect and its setting the state but it always renders the forbidden403page even though its false

Answer

Instead of forbidden === false use forbidden ? (code you want on true condition) : (code you want on false condition) because you are using forbidden === false which also equal to true.That is the reason your first condition rendering