How do I open a modal with youtube video with different video`s?

Question

Look guys, I’m developing a website with all my portfolio and in it will have some videos that are on youtube. At the event Onclick opens a modal with the video, pulling his ID through the video. I would like when I clicked on another portfolio item, to open the right video. I tried a few ways, with this.state, but without success.

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

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


render() {
    const { modalVideoOpen } = this.state

    return (
        <div>
            <div className="toolbar mb2 mt2">
                <button data-rel="all" className="btn fil-cat">Todos</button> 
                <button data-rel="web" className="btn fil-cat">Websites</button> 
                <button data-rel="art" className="btn fil-cat">Arte Digital</button> 
                <button data-rel="layout" className="btn fil-cat">Layouts</button> 
                <button data-rel="game" className="btn fil-cat">Games</button>
            </div>
            <div className="portfolio-container">

                {/* SECTION 1 */}
                <div class="portfolio-item-container">

                    {/* SPACE ROCKER */}
                    <a className="image fit all game" onClick={this.openModal}>
                        <div className="portfolio">
                                <img src={require('../portfolio/games/ship.png') } />
                            <header>
                                <h3>Space Rocker</h3>
                            </header>       
                        </div>
                    </a>

                </div>

                {/* SECTION 2 */}
                <div class="portfolio-item-container" >

                     {/* F*CKING PIDGEY */}
                    <a className="image fit all game" onClick={() => (this.openModal, this.state.modalVideoOpen === 2)}>
                        <div className="portfolio">
                            <img src={require('../portfolio/games/pidgey.png') } width="150"/>

                            <header>
                                <h3>F*cking Pidgey!!</h3>
                            </header>    
                        </div>
                    </a>
                </div>

                {/* SECTION 3 */}
                <div class="portfolio-item-container" onClick={() => (this.openModal, this.state.modalVideoOpen === 3)}>

                    {/* A Long Night */}
                    <a className="image fit all game">
                        <div className="portfolio">
                            <img src={require('../portfolio/games/long-night.png') } width="150"/>

                            <header>
                                <h3>A Long Night</h3>
                            </header>    
                        </div>
                    </a>

                </div>

                {/* SECTION 4 */}
                <div class="portfolio-item-container">

                    {/* Orbital */}
                    <a className="image fit all game" onClick={() => (this.openModal, this.state.modalVideoOpen === 4)}>
                        <div className="portfolio">
                            <img src={require('../portfolio/games/orbital.png') } width="150"/>

                            <header>
                                <h3>Orbital</h3>
                            </header>    
                        </div>
                    </a>

                </div>
            </div>

            {/* MODAL VIDEOS */}
            <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='TFeitCgsxiw' onClose={() => this.setState({isOpen: false})} />
        </div>
    )
}

Answer 1

Try to think about putting that kind of information inside the state. State is the state of its component. If there is something that changes this way, it would be interesting to put inside the state and from there you create functions to modify the state.

Suggestion:

Places the video id inside the state:

  this.state = {
    isOpen: false,
    idVideo:''
  }

Use it in the modal

<ModalVideo channel='youtube' isOpen={ this.state.isOpen } videoId={this.state.idVideo} onClose={ () => this.setState({ isOpen: false }) } />

The openModal receives the id and passes to the state:

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

Then just update the onClick passing the video id:

<a className="image fit all game" onClick={ this.openModal('TFeitCgsxiw') }>