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

CodePudding user response：

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;