!!Multiple video link getting only the last link... Any solution?

[definito]

import React, { Component } from 'react'

import ModalVideo from 'react-modal-video'

class Video extends React.Component {
   constructor () {
      super()
      this.state = {
        isOpen: false
      }
      this.openModal = this.openModal.bind(this)
    }

    openModal () {
      this.setState({isOpen: true})
    }

    render() {

        return (

            <div>

      <div class="container">

               <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} />
            <a href="javascript:void(0)" class="thumb  multimedia-icon-video big js-video-button" onClick={this.openModal}>
                     <picture title="Pipes on Road">

                        <img src="assets/images/world-news02.jpg" alt="Pipes on Road" title="Pipes on Road"/>
                     </picture>
                  </a>

            </div>

            <div class="col-12"> 
               <ModalVideo channel='vimeo' isOpen={this.state.isOpen} videoId='132793529' onClose={() => this.setState({isOpen: false})} />
              <a href="javascript:void(0)" class="thumb multimedia-icon-video js-video-button" onClick={this.openModal} >
                 <img class="image-style-medium-v" src="assets/images/world-news03.jpg" alt="বৈসাবি"/>
                 </a> 

</div>
</div>

         </div>
        )
    }
}

export default Video

!!Multiple video link getting only the last link... Any solution?

[saiarepuri2000]

same problem with my code also if you got the solution could please explain here

[atsu666]

This is because the state is shared.

class App extends React.Component {

  constructor () {
    super()
    this.state = {
      isOpen: false,
      isOpen2: false,
    }
  }

  render () {
    return (
      <React.Fragment>
        <div class="container">
          <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} />
          <a class="thumb  multimedia-icon-video big js-video-button" onClick={() => { this.setState({isOpen: true})}}>
            モーダル1
          </a>
        </div>

        <div class="col-12">
          <ModalVideo channel='vimeo' isOpen={this.state.isOpen2} videoId='132793529' onClose={() => this.setState({isOpen2: false})} />
          <a  class="thumb multimedia-icon-video js-video-button" onClick={() => { this.setState({isOpen2: true})}}>
            モーダル2
          </a>
        </div>
      </React.Fragment>
    )
  }
}