React - Accessing map properties from a different class

Question

I am pretty new to react and there are things I don't even know how to search for in google.

Ok so I have a class in which I am rendering an image gallery by mapping the images of the item. Bellow is the example code:

example.images.map((img,i) => { 
                return <div className="Class1" key={'image_' + i}>
                  <div className="Class2">
                    <img src={img.Url} alt={'image_' + i} onClick={this.doSomething}/>
                  </div>
                  <a className="Class3" onClick={doSomethingElse(img)}></a>
                </div>

And then there is another class inside the same file (not as a different component) on which I am creating a modal (module cloned from git) and all I want to do is to pass the {img.Url} from the mapping, all the way up to this modal class which is as follow:

class Modal extends Component {


  render() {
    const { onClose, isOpen } = this.props;

    //THIS IS WHERE I WANT TO PLACE THE URL FROM THE MAPPING
    const GrabUrl  = {how.to.do.it.?} ;

    return  (
      <Modal ariaHideApp={ false }
          isOpen={ isOpen }
          contentLabel="Modal"
          onRequestClose={ onClose }>

      <a className="closeModal" onClick={onClose}>X</a>

            <div className="Class4"><img src={GrabUrl} /></div>
      </Modal>
    )
  }
}

Is what I am trying to do even possible ?

Answer 1

If I understand correctly, yes it is,

you have to pass the img.Url as an argument to the doSomething function like this :

<img src={img.Url} alt={'image_' + i} onClick={() => this.doSomething(img.Url}/>

Then you can handle the modal from there.