Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to pass onClose function to child component

See original GitHub issue

I am using a modal to display a login form but I’m finding it difficult to pass the onClose function to my form component. This is what my code looks like :

File Name: index.tsx

const IndexPage: React.FC = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
      <Button onClick={onOpen}>Login</Button>
      
      <Modal
        isOpen={isOpen}
        onClose={onClose}
        closeOnOverlayClick={false}
        closeOnEsc={false}
        isCentered
      >
        <ModalOverlay />
        <ModalContent borderRadius={4}>
          <ModalHeader>
            <Box textAlign="center">
              <Heading>Sign In</Heading>
            </Box>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <LoginForm onClose={onClose} />
          </ModalBody>
        </ModalContent>
      </Modal>
    </Layout>
  );
};

File Name: LoginForm.tsx

const LoginForm: React.FC<any> = (onClose) => {
  const [email, setEmail] = useState("");

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
      console.log("Email is ", email);
      console.log("Email has been sent to user");
      onClose();
  }

  return (
    <Box my={8} textAlign="left">
      <form onSubmit={handleSubmit}>
        <FormControl isRequired>
          <FormLabel>Email address</FormLabel>
          <Input
            type="email"
            placeholder="Enter your email address"
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
          />
        </FormControl>

          <Button type="submit" width="full" mt={4}>
            Log In
          </Button>
      </form>
    </Box>
  );
};

export default LoginForm;

I get an error saying onClose() is not a function. How can I fix this issue ?