React: Bootstrap Modal doesnt show

Question

I would like to open a vertically centered modal as described here https://react-bootstrap.github.io/components/modal/

But I don't want it to open when I click a button I would like to open it when I open the component

import React, { Component } from "react";

import { Modal } from "react-bootstrap";

import CustomButton from "../CustomButton/CustomButton";

export class Login extends Component {
    render()
    {
        return (
            <Modal
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Login
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Centered Modal</h4>
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                        consectetur ac, vestibulum at eros.
                    </p>
                </Modal.Body>
                <Modal.Footer>
                    <CustomButton>Close</CustomButton>
                </Modal.Footer>
            </Modal>
        );
    }
}

export default Login;

Thank you guys

Answer 1

You need to pass the show prop to <Modal>. This is usually controlled by the state of the parent, so it will look something like -

render() {
  const { showModal } = this.props; // usually comes from parent

  return (
    <Modal show={showModal} ...
  )
}