How to open only specific modal window?

Question

I need to open only that modal div to which I made a click. But they all open when I click on any element. How to make it to only that modal, to which I make a click?

App.js

import { useEffect, useState } from "react";
import Modal from "./components/Modal";

import "./style.css";

function App() {
  useEffect(() => {
    fetch(
      "https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0"
    )
      .then((res) => res.json())
      .then((result) => setItem(result));
  }, []);

  const [item, setItem] = useState([]);

  const [modalActive, setModalActive] = useState(false);

  return (
    <div className="app">
      {item.map((item) => (
        <div
          className="image-container"
          key={item.id}
          onClick={() => setModalActive(true)}
        >
          <img className="image" src={item.urls.regular} alt="logo" />
          <div className="info">
            <img
              className="avatar"
              src={item.user.profile_image.small}
              alt="avatar"
            />
            <div className="text">
              <p className="name">{item.user.username}</p>
              <p className="name">{item.alt_description}</p>
            </div>
          </div>
          <Modal
            active={modalActive}
            setActive={setModalActive}
            url={item.urls.regular}
          />
        </div>
      ))}
    </div>
  );
}

export default App;

Modal.jsx

import React from "react";
import "./index.css";

const Modal = ({ setActive, active, url }) => {
  return (
    <div
      className={active ? "modal active" : "modal"}
      onClick={() => setActive(false)}
    >
      <div className="modal__img">
        <img src={url}/>
      </div>
    </div>
  );
};

export default Modal;

Does this answer your question? React modal always take the last element of map function — Brian Thompson

lissettdm lissettdm · Accepted Answer · 2020-11-20T17:53:20

Other solution is to use the index to show or hide the modal:

 <div className="app">
      {item.map((item, index) => (
        <div
          className="image-container"
          key={item.id}
          onClick={() => setModalActive(index)}
        >
          <img className="image" src={item.urls.regular} alt="logo" />
          <div className="info">
            <img
              className="avatar"
              src={item.user.profile_image.small}
              alt="avatar"
            />
            <div className="text">
              <p className="name">{item.user.username}</p>
              <p className="name">{item.alt_description}</p>
            </div>
          </div>
          <Modal
            active={modalActive === index}
            setActive={setModalActive}
            url={item.urls.regular}
          />
        </div>
      ))}
    </div>

How to open only specific modal window?

1 Answers