setAppElement from react-modal about react-image-lightbox HOT 5 CLOSED

import Modal from 'react-modal';

   componentWillMount() {
        Modal.setAppElement('body');
    }

import React, {Component} from 'react';
import Lightbox from 'react-image-lightbox';
import Modal from 'react-modal';

const images = [
    '//placekitten.com/1500/500',
    '//placekitten.com/4000/3000',
    '//placekitten.com/800/1200',
    '//placekitten.com/1500/1500'
];

export default class Gallery extends Component {
    constructor(props) {
        super(props);

        this.state = {
            photoIndex: 0,
            isOpen: false
        };
    }

    componentWillMount() {
        Modal.setAppElement('body');
    }

    render() {
        const {
            photoIndex,
            isOpen
        } = this.state;

        return (
            <div>
                <button
                    type="button"
                    onClick={() => this.setState({isOpen: true})}
                >
                    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,
                    })}
                />
                }
            </div>
        );
    }
}

var Lightbox = require('react-image-lightbox');
var images = [
    'https://d2ji2mue1p384z.cloudfront.net/img/2048x1536/196854.jpg',
    'https://d2ji2mue1p384z.cloudfront.net/img/2048x1536/196856.jpg',
];

window.ImageLightboxCollage = React.createClass({
    getInitialState: function() {
        return {
            index: 0,
            isOpen: false
        };
    },
    openLightbox: function() {
        this.setState({ isOpen: true });
    },
    closeLightbox: function() {
        this.setState({ isOpen: false });
    },
    moveNext: function() {
        this.setState({ index: (this.state.index + 1) % images.length });
    },
    movePrev: function() {
        this.setState({ index: (this.state.index + images.length - 1) % images.length });
    },
    render: function() {
        var 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]}

                    onCloseRequest={this.closeLightbox}
                    onMovePrevRequest={this.movePrev}
                    onMoveNextRequest={this.moveNext}
                />
            );
        }

        return (
            <div>
                <button type="button" onClick={this.openLightbox}>Open Lightbox</button>
                {lightbox}
            </div>
        );
    }
});


ReactDOM.render(React.createElement(ImageLightboxCollage, {params: params}), document.getElementById('main-header-container'));