1

I'm rank new to React and to Javascript in general. Thus the question.

I've a list of images being displayed in a React component. What I'm trying to achieve is to define a method to handle the onClick method on any of these images and render a new component as an overlay. This is my code:

class Viewer extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      images : ImageList
    };

  }

  componentDidMount(){

  }
  handleClick(mediaId, event){
    event.preventDefault();
    render(){
      <MyNewComponent  mediaId=mediaId />
    }
  }

  render(){
    return (
      <div className="row">
        <div className="image-viewer">
          <ul className="list-inline">
            {this.state.images.map(function (image) {
              return (<li key={image.mediaId}><a href="#" onClick={this.handleClick.bind(image.mediaId, event)}><img src={image.src}
                                                               className="img-responsive img-rounded img-thumbnail"
                                                               alt={image.mediaId}/></a></li>);
            })}

          </ul>
        </div>
      </div>
    );
  }
}
export default Viewer;

This clearly is wrong and throws up a bunch of errors. Can someone point me in the right direction?

Improve this question
2
  • What kind of an overlay? A full screen one? And what contents do you need in them? Commented Nov 1, 2016 at 17:09
  • @PraneshRavi an overlay of the size of the image itself. This overlay has to carry a form input and submit buttom. I need to pass the mediaId with an user Id to the api call. Commented Nov 1, 2016 at 17:27

1 Answer 1

Reset to default
2

Here how to handle the click event and show the overlay

class Viewer extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      images : ImageList,
      mediaId : 0
    };
    // Bind `this`
    // See "Binding to methods of React class" link below
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount(){ }

  handleClick(event){
    event.preventDefault();
    // Get the value of the `data-id` attribute <a data-id="XX">
    var mediaId = event.currentTarget.attributes['data-id'].value;
    // Set the state to re render
    this.setState({ mediaId }); // ES6 shortcut
    // this.setState({ mediaId: mediaId }); // Without shortcut
  }

  render(){
    // Set a variable which contains your newComponent or null
    // See "Ternary operator" link below
    // See "Why use null expression" link below
    var overlay = this.state.mediaId ? <MyNewComponent  mediaId={this.state.mediaId} /> : null;

    return (
      <div className="row">
        <div className="image-viewer">
          { overlay }
          <ul className="list-inline">
            {this.state.images.map(image => {
              return (<li key={image.mediaId}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><img src={image.src}
                                                               className="img-responsive img-rounded img-thumbnail"
                                                               alt={image.mediaId}/></a></li>);
            }).bind(this)}

          </ul>
        </div>
      </div>
    );
  }
}
export default Viewer;

Documentation

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

this looks great, but could you comment the code a bit with some explanation. I'm really a newbie to the world of javascript and find myself at a complete loss.
I keep getting `Uncaught TypeError: Cannot read property 'handleClick' of undefined' any idea why that's happening.
Fixed the error. I had to pass this to the map function. Putting it here as it might help others.
I had some documentation and comments. I fixed as well the this issue, thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.