react-modal
react-modal copied to clipboard
Modal body is being re-rendered before unmounting when isOpen is set to false
Summary:
I have an isOpen checking the existence of an item that the modal body requires:
<Modal
isOpen={!!this.state.item}
onRequestClose={() => this.setState({ item: null })}
>
<ModalBody item={item} />
</Modal>
When onRequestClose is called, the modal body is re-rendering once with item={null} before the body unmounts. This is throwing unwanted errors in my application when referencing the item being passed into my modal body.
Steps to reproduce:
- Have isModal check the existence of an item
- Have a modal body that depends on that item not being null
- Have some mechanism that sets the item to null. The body will unmount, but before it does, it quickly will re-render with item={null}
Expected behavior:
The body will unmount without re-rendering with a null value
Link to example of issue:
Example of the error: https://codepen.io/akirchmyer/pen/QWjREVJ