title: How to make my react-multi-carousel use a light-box feature for my ReactJS app
body: <p>I have images coming in from a rest api, into my application. Those images then get populated into a <strong>react-multi-carousel</strong>. What I would like to do is to make those images clickable for a light-box. I am fairly new to React. My code for the carousel slider so far is: </p>
  
  <p><strong>slider.js</strong></p>
  
  <pre><code>  import React, { Component } from 'react';
    import '../slider/slider.css';
    import Carousel from "react-multi-carousel";
    import "react-multi-carousel/lib/styles.css";
  
    const responsive = {
        superLargeDesktop: {
            breakpoint: { max: 4000, min: 3000 },
            items: 1,
        },
        desktop: {
            breakpoint: { max: 3000, min: 1024 },
            items: 1,
        },
        tablet: {
            breakpoint: { max: 1024, min: 464 },
            items: 1,
        },
        mobile: {
            breakpoint: { max: 464, min: 0 },
            items: 1,
        },
    };
  
    class Slider extends Component {
        _isMounted = false;
  
        state = {
            awsApiData: [],
            loading: false,
        }
  
        componentDidMount() {
            this._isMounted = true;
            console.log('app mounted');
            this.setState({ loading: true });
            /*global fetch */
            fetch('https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/xxxxx')
                .then(data =&gt; data.json())
                .then(data =&gt; this.setState({ awsApiData: data[0], loading: false }, () =&gt; console.log(data)));
        }
        componentWillUnmount() {
            this._isMounted = false;
        }
  
        render() {
            return (
                &lt;div&gt;
                {this.state.loading
                      ? &lt;div className="text-center"&gt;Loading...&lt;/div&gt;
                      : 
                          &lt;Carousel
                              additionalTransfrom={0}
                              showDots={false}
                              arrows={true}
                              autoPlaySpeed={3000}
                              autoPlay={false}
                              centerMode={false}
                              className="slider"
                              containerClass="container-with-dots"
                              dotListClass="dots"
                              draggable
                              focusOnSelect={false}
                              infinite
                              itemClass="carousel-top"
                              keyBoardControl
                              minimumTouchDrag={80}
                              renderButtonGroupOutside={false}
                              renderDotsOutside
                              responsive={responsive}&gt;
                             {Object.values(this.state.awsApiData).map((post, indx) =&gt; {
    return (
        &lt;div className="mt-5" key={indx}&gt;
            &lt;img className="media-img card-img-top card-img-hero" src={post.image} alt="Alt text"&gt;&lt;/img&gt;
  
        &lt;/div&gt;
    );
  })}
                          &lt;/Carousel&gt;
                }
                          &lt;/div&gt;
            );
        }
    }
  
    export default Slider;
  </code></pre>