CODEWITHSUNDEEP
javascriptreactjsbootstrap-modalreact-bootstrap
Edward Suárez
Edward Suárez

Reputation: 27

React bootstrap duplicated modal components

enter image description here

For some reason the modal is rendered more than one time, sometimes 2 or 3. Then, after a few seconds the aditionals modals are removed automatically.

The modal is opened by a route so I'm doing somethig like this:

const ModalWrapper = (props) => {
  return (
    <Modal
      show={props.showModal}
      onHide={props.hide}
    >
    ...
    </Modal>
  );
};

class ComponentPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: true,
    };
  }

  @autobind
  closeModal() {
    this.props.history.goBack();
    this.setState({showModal: false});
  }

  render() {
    return (
      <ModalWrapper
        {...this.state}
        hide={this.closeModal}
      />
    );
  }
}

Upvotes: 1

Views: 1363

Answers (2)

Andrea De Luisi
Andrea De Luisi

Reputation: 127

Usually this happens when the Modal is inside a wrapper, for example:

const ChildrenWrapper = ({children}) => {
  return <div>{children}</div>
}

And the modal is a child in the wrapper:

const ModalWrapped= ({}) => {
return <ChildrenWrapper>
            <Modal show={true}>some content</Modal>
       </ChildrenWrapper>
}

Than the App :

const App = () => {
   return <ModalWrapped/>
}

The result is that the instance of the Modal is rendered 2 times in the virtual dom.

Upvotes: 3

Andrea De Luisi
Andrea De Luisi

Reputation: 127

I got the same issue and i opened an issue on GitHub: https://github.com/react-bootstrap/react-bootstrap/issues/2730

Upvotes: 1

Related Questions