Estoy reconstruyendo un sitio web estático en reaccionar, el sitio web muestra películas en tarjetas y al hacer clic en esas tarjetas, aparece su modal de película correspondiente, al igual que en mi sitio web estático https://movie-list-website-wt.netlify.app/ pero parece que no puedo entender cómo hacer que el botón y la función abran el modal en reaccionar
import React from "react"; const IMG_URL = 'https://image.tmdb.org/t/p/w500'; function getColor(vote) { if(vote >= 8){ return 'green' }else if (vote >= 5){ return 'orange' }else{ return 'red' } } function Movies ({title, id, poster_path, overview, vote_average, release_date}) { return ( <div className="movie-modal-container"> <div className="movie"> <button id={`myBtn${id}`} className="myBtn"> <img src={IMG_URL+poster_path} alt={title}/> <div className="movie-info"> <h3>{title}</h3> <span className={getColor(vote_average)}>{vote_average}</span> </div> <div className="overview"> <div className="overview-header"> <h3>Overview</h3> <div className="addBtn"> <i class="fas fa-plus"></i> </div> </div> <p>{overview}</p> </div> </button> </div> <div className="modal" id={`myModal${id}`}> <div className="modal-content"> <span id={"close"+id}><i class="fas fa-times"></i></span> <div className="modal-poster"> <img src={IMG_URL+poster_path} alt={title}/> </div> <div className="modal-info"> <h2>{title}</h2> <span>{vote_average}/10</span> <h3 className="releasedate">Release Date</h3> <p>{release_date}</p> <h3>Overview</h3> <p className="modal-overview">{overview}</p> </div> </div> </div> </div> ); } export default Movies;El comportamiento que quiero es cuando hago clic en las tarjetas que ya envolví como un botón, aparece el modal de película correspondiente
Puede definir un estado para manejar la visualización/ocultación modal y utilizar la representación condicional para representar: ocultar el modal.
Intenta cambiar tu código así:
import { useState } from 'react'; function Movies({ title, id, poster_path, overview, vote_average, release_date, }) { // Define state const [isModalOpen, setIsModalOpen] = useState(false); // Define function that will open the modal const handleOpen = () => { setIsModalOpen(true); }; // Define function that will close the modal const handleClose = () => { setIsModalOpen(false); }; return ( <div className='movie-modal-container'> <div className='movie'> <!-- Open the modal on button click --> <button id={`myBtn${id}`} className='myBtn' onClick={handleOpen}> <img src={IMG_URL + poster_path} alt={title} /> <div className='movie-info'> <h3>{title}</h3> <span className={getColor(vote_average)}>{vote_average}</span> </div> <div className='overview'> <div className='overview-header'> <h3>Overview</h3> <div className='addBtn'> <i class='fas fa-plus'></i> </div> </div> <p>{overview}</p> </div> </button> </div> <!-- Use conditional rendering to show - hide the modal --> <div className={`modal ${isModalOpen ? 'open' : ''}`} id={`myModal${id}`}> <div className='modal-content'> <!-- Close the modal on button click --> <span id={'close' + id} onClick={handleClose}> <i class='fas fa-times'></i> </span> <div className='modal-poster'> <img src={IMG_URL + poster_path} alt={title} /> </div> <div className='modal-info'> <h2>{title}</h2> <span>{vote_average}/10</span> <h3 className='releasedate'>Release Date</h3> <p>{release_date}</p> <h3>Overview</h3> <p className='modal-overview'>{overview}</p> </div> </div> </div> </div> ); } export default Movies;