-1

Oie pessoal, estou desenvolvendo um site com todo o meu portfolio e nele vai ter alguns vídeos que estão no youtube. No evento OnClick abre um modal com o vídeo, puxando o ID dele pelo videoID. Eu gostaria que quando eu clicasse em outro item do portfolio, abrisse o video certo. Tentei algumas formas, com o this.state, mas sem sucesso.

 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>
    )
}

1 Resposta 1

0

Tenta pensar em colocar esse tipo de informação dentro do state. O state é o estado do seu componente. Se tem algo que muda dessa forma, seria interessante colocar dentro do state e a partir dai você cria funções para modificar o state.

Sugestão:

Coloca o id do vídeo dentro do state:

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

Usa ele no modal

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

O openModal recebe a id e passa para o state:

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

Ai é só atualizar o onClick passando a id do vídeo:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .