Modal element is not hiding [React & React - Bootstrap]

1
votes

I've created modal with React Bootstrap. Despite the fact, that I'm using onHide function, nothing happens. Here's my modal:

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

I'm passing "show" from other component, when click occurs on some element. onClick on that element is specified to: "showModal: true". Then I'm passing showModal to other component that is rendering different elements according to option choosed:

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

At last in MyForm component I have function that passes props to component with modal:

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

So, this is the way "show" is going. In my file with modal component I have function for handling hide:

handleHide() {
    this.setState({ showModal: false });
}

Now in this component showModal is initialize in state like so:

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

    this.handleHide = this.handleHide.bind(this);
}

I've tried many things. Other state variables, without initializing showModal in state and many more. When clicking on the button or beyond the modal, modal is still visible and not hiding. I will be very grateful for your help and/or suggestions how to fix this.

So, the way showModal is going: parent component (where this.state.addingState is happening) -> MyForm component (where let modalComponentProps= { show: this.props.show, ... happens) -> actual modal component

Code on CodePen

2
javascripthtmlreactjsreduxreact-bootstrap

2 Answers

2
votes

Look on the shouldComponentUpdate method

shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
}

You are checking only props but you are changing the state of the component. Fix the method or remove it and it will be working

3
votes

you have 2 possibilities: you can add the method to your parent and pass the method + the result of show like this (use same name of props and method for best practice, so you will be not confuse):

Parent

<Modal
    {...this.props}
    bsSize="large"
    aria-labelledby="contained-modal-title-lg"
    show={this.state.showModal}
    handleHide={this.handleHide}
  >

Child

   <MyForm
        show={this.props.showModal}
        handleHide={this.props.handleHide}
    />

To use the modal from parent, you can call it like this in child: this.props.handleHide(true).

Or you let the child manage the state by itself, so you would place the method and state in child, not in parent (depending on the architecture).

It is not recommended to add the props in child state. Also, you could use es6 function to avoid binding like this:

handleHide = () => this.setState({ showModal: false });