// https://www.npmjs.com/package/lightbox-react
import React from 'react'
import Lightbox from 'lightbox-react'
import 'lightbox-react/style.css'

import style from './photoarray.module.sass'
class photoArray extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      photoIndex: 0,
      isOpen: false,
      images: [],
    }
    this.buildarray = this.buildarray.bind(this)
  }
  buildarray() {
    const tempArray = []
    this.props.imageArray.forEach(element => {
      tempArray.push(element.src)
    })
    tempArray.push(this.props.altImage.src)
    this.setState({ images: tempArray })
  }
  componentDidMount() {
    this.buildarray()
  }

  render() {
    const { photoIndex, isOpen } = this.state
    return this.state.images.map((img, index) => (
      <div className={style.img__wrapper}>
        <img
          key={index}
          src={img}
          alt=""
          onClick={() => this.setState({ isOpen: true })}
        />
        {isOpen && (
          <Lightbox
            mainSrc={this.state.images[photoIndex]}
            nextSrc={
              this.state.images[(photoIndex + 1) % this.state.images.length]
            }
            prevSrc={
              this.state.images[
                (photoIndex + this.state.images.length - 1) %
                  this.state.images.length
              ]
            }
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex:
                  (photoIndex + this.state.images.length - 1) %
                  this.props.imageArray.length,
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % this.state.images.length,
              })
            }
          />
        )}
      </div>
    ))
  }
}

export default photoArray

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ArtistDetail`.
    in ArtistDetail (created by I18n)
    in I18n (created by Translate(ArtistDetail))
    in Translate(ArtistDetail) (created by Query)
    in Query (created by Apollo(Translate(ArtistDetail)))
    in Apollo(Translate(ArtistDetail)) (created by Query)
    in Query (created by Apollo(Apollo(Translate(ArtistDetail))))
    in Apollo(Apollo(Translate(ArtistDetail))) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in Provider (created by App)
    in main (created by App)
    in App (created by Route)
    in Route (created by withRouter(App))
    in withRouter(App)
    in I18nextProvider
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
    in ApolloProvider

const lightBoxSources = props.artistDetail.route.entity.fieldWannaDoS.map((item, index) =>
      <Overlay
        img={item.entity.fieldMediaImage.image}
        heading={props.artistDetail.route.entity.title}
        url={props.match.url}
        themes={item.entity.fieldStyle}
        index={item.entity.fieldMediaImage.targetId}
        key={index}
        language={props.location.pathname.split('/')[1]}
        lightBoxType={'wannados'}
        close={this.closeOverlayWannaDos}
      />
    );

import React, { Component } from 'react';
import Lightbox from 'lightbox-react';
import 'lightbox-react/style.css';

const Video = () => (
  <iframe
    title="cats"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/5dsGWM5XGdg"
    style={{
      maxWidth: '97%',
      position: 'absolute',
      left: 0,
      right: 0,
      margin: 'auto',
      top: '50%',
      transform: 'translateY(-50%)',
    }}
  />
);

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

export class LightboxComponent extends Component {
  constructor(props) {
    super(props);

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

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

export default LightboxComponent;

<div class="ril-inner ril__inner">

  <!-- <div> with <iframe> does not appear here -->

  <img class="ril-image-current ril__image" ... />
  <img class="ril-image-prev ril__imagePrev ril__image" ... />
</div>

<div class="inner ril-inner inner___1rfRQ">
  <img class="image-next ril-image-next imageNext___1uRqJ image___2FLq2" ... />

  <!-- it is OK! -->
  <div class="image-current ril-image-current image___2FLq2">
    <iframe ...></iframe>
  </div>

  <img class="image-prev ril-image-prev imagePrev___F6xVQ image___2FLq2" .../>
</div>