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