is there any way we can display and hide the button in react based on function return type in react js

datecheck is the function that return's if current date and endtime is same the function is not getting called on the return area,could anyone suggest what went wrong

This is my function

const datecheck = async () => {
    const current = moment().format('DD/MM/YYYY');
    const endDate=getDateFormat(endTime)
    if(current == endDate){
      console.log("11111111111---------->")
      return true;
    }else{
      console.log("2222222222---------->")
      return false;
    }
  };


      //This is where i am trying to access
      {
        datecheck === true ?
        <Grid container style={{ justifyContent: 'center', paddingBottom: 10 }}>
        <Grid item className={''} />
        <Grid item>
          <Typography>
            {user && user.Type === KEY_USER_TYPE.faculty ? (
              <Button
                variant="contained"
                target="blank"
                color="primary"
                onClick={onStartClass}
              >
                {t('labels:Start_clas')}
              </Button>
            ) : user && user.Type === KEY_USER_TYPE.student ? (
              <Button
                variant="contained"
                target="blank"
                color="primary"
                onClick={onJoinClass}
              >
                {t('labels:Join_Class')}
              </Button>
            ) : null}
          </Typography>
        </Grid>
      </Grid>:""
      }
    
    </Box>
  );

CodePudding user response：

You are using the "===" operator to compare the function itself to the boolean value true, which will always be false

{
  datecheck() === true ?
  <Grid container style={{ justifyContent: 'center', paddingBottom: 10 }}>
  <Grid item className={''} />
  <Grid item>
    <Typography>
      {user && user.Type === KEY_USER_TYPE.faculty ? (
        <Button
          variant="contained"
          target="blank"
          color="primary"
          onClick={onStartClass}
        >
          {t('labels:Start_clas')}
        </Button>
      ) : user && user.Type === KEY_USER_TYPE.student ? (
        <Button
          variant="contained"
          target="blank"
          color="primary"
          onClick={onJoinClass}
        >
          {t('labels:Join_Class')}
        </Button>
      ) : null}
    </Typography>
  </Grid>
</Grid>:""
}

CodePudding user response：

This is a way you can make it work:

1. remove the 'async'
2. include the parenthesis - datecheck()

const datecheck = () => {
    const current = moment().format('DD/MM/YYYY');
    const endDate=getDateFormat(endTime)
    if(current == endDate){
      console.log("11111111111---------->")
      return true;
    }else{
      console.log("2222222222---------->")
      return false;
    }
  };

{
        datecheck() === true ?
        <Grid container style={{ 
...
}

3. Additional: I advise you learn javascript before learning React. I mean get really fluent with it, otherwise you will struggle to learn React.