From 581a39b81d2261abb52ae4c0dd5be1a5073dfda6 Mon Sep 17 00:00:00 2001
From: Sean Quinn <swquinn@gmail.com>
Date: Sat, 18 Jun 2022 11:29:06 -0400
Subject: [PATCH] fix: conditional rendering causes issues in React 16.3+

Remove conditional rendering in favor of passing down the isOpen
property to the React <Modal> component.
---
 README.md                                     | 35 ++++++++--------
 examples/cats/app.js                          | 42 +++++++++----------
 .../react-image-lightbox.spec.js.snap         |  1 +
 src/__tests__/react-image-lightbox.spec.js    |  1 +
 src/react-image-lightbox.js                   |  3 +-
 5 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 6228b219..1fa394d5 100644
--- a/README.md
+++ b/README.md
@@ -51,24 +51,23 @@ export default class LightboxExample extends Component {
           Open Lightbox
         </button>
 
-        {isOpen && (
-          <Lightbox
-            mainSrc={images[photoIndex]}
-            nextSrc={images[(photoIndex + 1) % images.length]}
-            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
-            onCloseRequest={() => this.setState({ isOpen: false })}
-            onMovePrevRequest={() =>
-              this.setState({
-                photoIndex: (photoIndex + images.length - 1) % images.length,
-              })
-            }
-            onMoveNextRequest={() =>
-              this.setState({
-                photoIndex: (photoIndex + 1) % images.length,
-              })
-            }
-          />
-        )}
+        <Lightbox
+          isOpen={isOpen}
+          mainSrc={images[photoIndex]}
+          nextSrc={images[(photoIndex + 1) % images.length]}
+          prevSrc={images[(photoIndex + images.length - 1) % images.length]}
+          onCloseRequest={() => this.setState({ isOpen: false })}
+          onMovePrevRequest={() =>
+            this.setState({
+              photoIndex: (photoIndex + images.length - 1) % images.length,
+            })
+          }
+          onMoveNextRequest={() =>
+            this.setState({
+              photoIndex: (photoIndex + 1) % images.length,
+            })
+          }
+        />
       </div>
     );
   }
diff --git a/examples/cats/app.js b/examples/cats/app.js
index e9f8a0d7..35de0d32 100644
--- a/examples/cats/app.js
+++ b/examples/cats/app.js
@@ -132,29 +132,25 @@ class App extends Component {
   }
 
   render() {
-    let lightbox;
-    if (this.state.isOpen) {
-      lightbox = (
-        <Lightbox
-          mainSrc={images[this.state.index]}
-          nextSrc={images[(this.state.index + 1) % images.length]}
-          prevSrc={
-            images[(this.state.index + images.length - 1) % images.length]
-          }
-          mainSrcThumbnail={thumbs[this.state.index]}
-          nextSrcThumbnail={thumbs[(this.state.index + 1) % images.length]}
-          prevSrcThumbnail={
-            thumbs[(this.state.index + images.length - 1) % images.length]
-          }
-          onCloseRequest={this.closeLightbox}
-          onMovePrevRequest={this.movePrev}
-          onMoveNextRequest={this.moveNext}
-          onImageLoadError={App.onImageLoadError}
-          imageTitle={titles[this.state.index]}
-          imageCaption={captions[this.state.index]}
-        />
-      );
-    }
+    let lightbox = (
+      <Lightbox
+        isOpen={this.state.isOpen}
+        mainSrc={images[this.state.index]}
+        nextSrc={images[(this.state.index + 1) % images.length]}
+        prevSrc={images[(this.state.index + images.length - 1) % images.length]}
+        mainSrcThumbnail={thumbs[this.state.index]}
+        nextSrcThumbnail={thumbs[(this.state.index + 1) % images.length]}
+        prevSrcThumbnail={
+          thumbs[(this.state.index + images.length - 1) % images.length]
+        }
+        onCloseRequest={this.closeLightbox}
+        onMovePrevRequest={this.movePrev}
+        onMoveNextRequest={this.moveNext}
+        onImageLoadError={App.onImageLoadError}
+        imageTitle={titles[this.state.index]}
+        imageCaption={captions[this.state.index]}
+      />
+    );
 
     return (
       <div>
diff --git a/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap b/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap
index b4f399d7..8c972afd 100644
--- a/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap
+++ b/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap
@@ -14,6 +14,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
   imageLoadErrorMessage="This image failed to load"
   imagePadding={10}
   imageTitle={null}
+  isOpen={true}
   keyRepeatKeyupBonus={40}
   keyRepeatLimit={180}
   mainSrc="/fake/image/src.jpg"
diff --git a/src/__tests__/react-image-lightbox.spec.js b/src/__tests__/react-image-lightbox.spec.js
index a5ab790b..de99fd5c 100644
--- a/src/__tests__/react-image-lightbox.spec.js
+++ b/src/__tests__/react-image-lightbox.spec.js
@@ -15,6 +15,7 @@ Lightbox.loadStyles = jest.fn();
 
 const commonProps = {
   mainSrc: '/fake/image/src.jpg',
+  isOpen: true,
   onCloseRequest: () => {},
 };
 
diff --git a/src/react-image-lightbox.js b/src/react-image-lightbox.js
index ff8b2d7f..2c673e45 100644
--- a/src/react-image-lightbox.js
+++ b/src/react-image-lightbox.js
@@ -1279,6 +1279,7 @@ class ReactImageLightbox extends Component {
       imageCrossOrigin,
       reactModalProps,
       loader,
+      isOpen,
     } = this.props;
     const {
       zoomLevel,
@@ -1448,7 +1449,7 @@ class ReactImageLightbox extends Component {
 
     return (
       <Modal
-        isOpen
+        isOpen={isOpen}
         onRequestClose={clickOutsideToClose ? this.requestClose : undefined}
         onAfterOpen={() => {
           // Focus on the div with key handlers