I'm rebuilding a static website in react, the website displays movies on cards and upon clicking those cards, their corresponding movie modal appears, just like in my static website https://movie-list-website-wt.netlify.app/ but I can't seem to understand how to make the button and the function to open the modal in react
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;
The behavior I want is when I click on the cards which I already wrapped as a button, the corresponding movie modal appears
You can define a state to handle modal show / hide, and use conditional rendering to render - hide the modal.
Try to change your code like this:
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;