CODEWITHSUNDEEP
reactjsreact-bootstrap
Greg
Greg

Reputation: 197

react-bootstrap modal opens but won't close

I originally had the code for my modal in the same component as the parent page and it worked fine, but now I've moved it out into it's own component I can no longer close the modal once it has been opened. I'm aware there are similar issues posted previously but they all seem to be using class components and I can't get the solutions to work for me.

I've stripped out irrelevant code for readability's sake

Main component

import { LoginModal } from '../partials/LoginModal';

export function SignUpButtonGroup() {
  const [showLogin, setShowLogin] = useState(false);
  const handleCloseLogin = () => setShowLogin(false);
  const handleShowLogin = () => setShowLogin(true);

  return (
    <Container>
      <LoginModal showLogin={showLogin} onHideLogin={handleCloseLogin}></LoginModal>
      ...
      <Button onClick={handleShowLogin} className="btn-sign-in btn btn-lg mx-auto" variant="primary">sign in
      </Button>

Modal component

import { Modal } from 'react-bootstrap';
export function LoginModal(props) {

  return (
    <Fragment>
      <Modal show={props.showLogin} onHide={props.handleCloseLogin}>
      </Modal>

Upvotes: 0

Views: 100

Answers (1)

R u c k s a c k
R u c k s a c k

Reputation: 784

You need to refer to the prop by its correct name props.onHideLogin in the Modal component.

It's only called handleCloseLogin in the Main component.

Upvotes: 1

Related Questions