React-modal for dynamic display of images

Question

I'm building an app using react , I have a page where all images display dynamically. I want those images to open in react-modal when I click . How do i set the modal for the images to be displayed

What property should I set in a modal so that it applies to all images

Instead of using create a new type of component like – Brian Mar 31 '17 at 17:48 — Brian, Mar 31 '17 at 17:48

score 2 · Answer 1 · answered Mar 31 '17 at 18:02

class ImageModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  setModalState(showModal) {
    this.setState({
      showModal: showModal
    });
  }

  render() {
    return (
      <div>
        <img src={ this.props.src } onClick={ this.setModalState.bind(this, true) } />
        <ReactModal isOpen={ this.state.showModal }>
          <img src={ this.props.src } onClick={ this.setModalState.bind(this, false) } />
        </ReactModal>
      </div>
    )
}

React-modal for dynamic display of images

1 Answers1