Access usestate when using functional component React

Question

I am using a functional component to create a card component. Now I want to make use of React.usestate to open a dialogue box when clicking on a button, something like this: onClick {handleOpen}. The problem is, I am not sure where to place the usestate block, because when placed outside of the component, the whole page won't render, but I can't figure out where to place it inside of the component. I am new to react and still confused, hope this makes sense!

 
const GroupCard: FC<Group> = ({
  name,
  date,
  description,
  users,
  interests,
}

) => (


  <Card sx={{ width: '350px', marginBottom: '100px' }}>
    <CardHeader title={name} />

    <Stack
      direction="row"
      spacing={1}
      sx={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
      }}
    >
      {interests.map((interest) => (
        <Chip color="success" label={interest} />
      ))}
    </Stack>

    <p>
      {description}
    </p>

    <p>
      {users.length + 1}
      {' '}
      members
    </p>
    <p>{date}</p>


    <Grid container justifyContent="center" >
      <Grid item xs={"auto"} sm={"auto"} md={"auto"} justifyContent="space-around" >
        <Button onClick={handleOpen} variant="contained" size="small" style={{ background: '#018749' }} >
          Join group
        </Button>
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <Typography
              id="modal-modal-title"
              variant="h6"
              component="h2"
            >
              You have been added to this group.
            </Typography>
          </Box>
        </Modal>
      </Grid>

      <Grid item xs={"auto"} sm="auto" md="auto" justifyContent="space-between" >
        <Button variant="contained" size="small" style={{ background: '#018749' }} >
          View profile
        </Button>
      </Grid>

      <Grid item xs={"auto"} sm="auto" md="auto" justifyContent="space-between" >
        <Button variant="contained" size="small" style={{ background: '#018749' }} >
          Match
        </Button>
      </Grid>
    </Grid>

  </Card>
)

// this block needs to be placed somewhere else
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

export default GroupCard;

Answer 1

A simple read of the docs will tell you that you need to place it in the component. You need to utilize curly brace syntax to return your JSX instead of parentheses.

const GroupCard: FC<Group> = ({
  name,
  date,
  description,
  users,
  interests,
}

) => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

  return (<Card sx={{ width: '350px', marginBottom: '100px' }}>
    <CardHeader title={name} />

    <Stack
      direction="row"
      spacing={1}
      sx={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
      }}
    >
      {interests.map((interest) => (
        <Chip color="success" label={interest} />
      ))}
    </Stack>

    <p>
      {description}
    </p>

    <p>
      {users.length + 1}
      {' '}
      members
    </p>
    <p>{date}</p>


    <Grid container justifyContent="center" >
      <Grid item xs={"auto"} sm={"auto"} md={"auto"} justifyContent="space-around" >
        <Button onClick={handleOpen} variant="contained" size="small" style={{ background: '#018749' }} >
          Join group
        </Button>
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <Typography
              id="modal-modal-title"
              variant="h6"
              component="h2"
            >
              You have been added to this group.
            </Typography>
          </Box>
        </Modal>
      </Grid>

      <Grid item xs={"auto"} sm="auto" md="auto" justifyContent="space-between" >
        <Button variant="contained" size="small" style={{ background: '#018749' }} >
          View profile
        </Button>
      </Grid>

      <Grid item xs={"auto"} sm="auto" md="auto" justifyContent="space-between" >
        <Button variant="contained" size="small" style={{ background: '#018749' }} >
          Match
        </Button>
      </Grid>
    </Grid>

  </Card>);
}

export default GroupCard;