fix: conditional rendering causes issues in React 16.3+

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>
     );
   }

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>

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"

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: () => {},
 };
 

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