CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
George
George

Reputation: 69

React-Bootstrap Modal rendering twice

I used React-Bootstrap Modal and don't understand why Foo component is rendering twice?

import { Modal, Button } from 'react-bootstrap';

const Foo = (props) => {
  console.log(‘a’);
  return(
    <div>foo</div>
  )
}

class Example extends Component {
  render() {
    return(
      <Modal show={true}>
        <Foo />
      </Modal>
    )
  }
}

Upvotes: 0

Views: 2372

Answers (1)

Steven Scaffidi
Steven Scaffidi

Reputation: 2307

Looks like Bootstrap modal sets state when the modal enters (even if show is initially set to true as you have above). Please see https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L202-L209. Therefore, a render would be triggered again causing Foo to render twice.

EDIT: You actually have to go all the way back to React-transition-group to understand why the onEntering function is actually called. https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L192. On componentDidMount this.updateStatus is called which eventually calls onEntering.

Upvotes: 2

Related Questions