title: Sending relative data from mapped array into a modal?
body: <p><a href="https://i.stack.imgur.com/wljZy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wljZy.jpg" alt="Demonstration of what should happen"></a></p>
  
  <p>So I have mapped data from array into a carousel, creating total of twenty carousel items. Each element has "same" button embedded into them. I want to send the relative data from each element into the modal when that button is clicked and honestly I have no idea even where to start from.</p>
  
  <p>This is the code I have currently for this component:</p>
  
  <p>Edit: highlighted the data I would like to pass into the relative modal.</p>
  
  <pre><code>    import React from 'react';
      import {connect} from 'react-redux';
      import Slider from 'react-slick';
      import Modal from 'react-modal';
  
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  
      import { fetchActionM } from '../../store/actions/moviepageActions';
  
      const img_url = 'https://image.tmdb.org/t/p/original';
  
      const customStyles = {
          content : {
            top                   : '50%',
            left                  : '50%',
            right                 : 'auto',
            bottom                : 'auto',
            marginRight           : '-50%',
            transform             : 'translate(-50%, -50%)',
            color                 : 'white',
            background: '#080a0a none repeat scroll 0% 0%',
            width: '600px',
          }
      };
  
      Modal.setAppElement('#root')
  
      class ActionMov extends React.Component{
          constructor() {
              super();
  
              this.state = {
                  modalIsOpen: false
              };
  
              this.openModal = this.openModal.bind(this);
              this.afterOpenModal = this.afterOpenModal.bind(this);
              this.closeModal = this.closeModal.bind(this);
  
  
          }
  
          openModal() {
              this.setState({modalIsOpen: true});
          }
  
          afterOpenModal(){
              this.subtitle.style.color = '#f00';
          }
  
          closeModal(){
              this.setState({modalIsOpen: false});
          }
  
          render(){
          //send same mapped data from this into the modal when clicked on the button &lt;FontAwesomeIcon onClick....
          let action;
          if(this.props.action.length &gt; 0){
              action = this.props.action[0].results.map(ac =&gt; (
                  &lt;div className='sliderbox' key={ac.id}&gt;
                      &lt;div className='text-block'&gt;
                          &lt;h5 className='sliderTitle'&gt;{ac.title}&lt;/h5&gt;
                          &lt;FontAwesomeIcon onClick={() =&gt; this.openModal({ac})} icon="plus-circle" className='sliderIcon' /&gt;
  
  {/* I need same data from these two be passed into the relative modal */}
  
                          &lt;p className='sliderRelease'&gt;{ac.release_date}&lt;/p&gt;
                          &lt;p className='sliderVote'&gt;{ac.vote_average}&lt;/p&gt;
  
  {/* Just highlighting this area */}
  
                      &lt;/div&gt;
                      &lt;img className='sliderImg' src={`${img_url}${ac.poster_path}`} alt={ac.title} /&gt;
                  &lt;/div&gt;
              ));
          }
  
          const settings = {
              dots: true,
              infinite: true,
              speed: 500,
              slidesToShow: 6,
              slidesToScroll: 3,
              draggable: true,
          };
              return (
                  &lt;div&gt;
                      &lt;Slider {...settings}&gt;
                          {action}
                      &lt;/Slider&gt;
                      &lt;Modal
                      isOpen={this.state.modalIsOpen}
                      onAfterOpen={this.afterOpenModal}
                      onRequestClose={this.closeModal}
                      style={customStyles}
                      contentLabel='Movies modal'
                      &gt;
                      {
                          //Would like to print relative data here
                      }
                      &lt;h2 ref={subtitle =&gt; this.subtitle = subtitle}&gt;TITLE GOES HERE&lt;/h2&gt;
                          &lt;div&gt;
                          &lt;p&gt;Id: {`&lt;id goes here&gt;`}&lt;/p&gt;
                          &lt;h5 className='modalRelease'&gt;Released: {`&lt;release date goes here&gt;`}&lt;/h5&gt;
                          &lt;h5 className='modalVote'&gt;Rating: {`&lt;rating goes here&gt;`}&lt;/h5&gt;
                          &lt;/div&gt;
                      &lt;button className='modalClose' onClick={this.closeModal}&gt;X&lt;/button&gt;
                      &lt;/Modal&gt;
                  &lt;/div&gt;
              )
          }
      }
  
      const mapStateToProps = (state) =&gt; {
          return {
              action: state.movies.actions
          }
      }
  
      export default connect(mapStateToProps)(ActionMov);
  </code></pre>