1

I am unable to make a Modal from react-bootstrap to render on the screen. The DOM node is being added to the DOM tree, but it does not want to show on the screen.
This is my code of the class that hosts the Modal, and I am passing the state of another component to it(I want to change this component's state via the Modal). 

class ChangeModal extends React.Component{

    constructor(props){
        super(props);
    }

    render(){

        return(
            <Modal show={this.props.state.showModal} onHide={this.props.close}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>{this.props.state.id}</h4>

            </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.close}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}
Justplayit
  • 667
  • 1
  • 7
  • 22
  • are you sure `state` is inside `props`? What's the value on render? – Jason Dec 26 '17 at 17:36
  • This `Modal` is being called by a `button` that resides on multiple components on the page. When pressing the button, I can see the `Modal` being created on the tree, but it is not in view. Also, using the Inspector, I can see the outline of each element rendered, but they're just invisible. The value of the `id` corresponds to each `state` from the component the `Modal` is being called from. – Justplayit Dec 26 '17 at 17:39
  • I found out that the `div` that holds the modal, with role `dialog`, has a `height` of `0`, but I do not know how to prevent this. – Justplayit Dec 26 '17 at 17:42

1 Answers1

0

It seems that this library, and others, do not use the proper syntax that Bootstrap v4 beta 2 is offering. Class names do not match the ones in this version of Bootstrap

Justplayit
  • 667
  • 1
  • 7
  • 22
  • react-bootstrap uses bootstrap 3 css classes, I believe. https://github.com/react-bootstrap/react-bootstrap/issues/1187 – Jason Dec 26 '17 at 18:28