Links and clickable elements that update the state of other components activate modal video.

[Boeing787]

I have a grid of videos which when clicked set the state of the React-modal-video to isOpen:true.

I also have a header component, separate from the grid of videos, that when clicked is activating the React modal video too. This header component is a menu that expands in and out, and modifies its own state with an onClick function.

How can we prevent your video grid from activating when other buttons modify their own state (menuIsOpen)?

[steelydylan]

Hi @Boeing787 You have to modify isOpen attribute of the modal to false when you click the close button so as not to open the modal again when other states are changed Following is the sample code

import React from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'react-modal-video'

class App extends React.Component {

  constructor () {
    super()
    this.state = {
      isOpen: false
    }
    this.openModal = this.openModal.bind(this)
  }

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

  render () {
    return (
      <div>
        <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} />
        <button onClick={this.openModal}>Open</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
    document.getElementById('root')
)