I want to show specific images in the modal when i click on a card

[kamelnassar2828]

this is my code

import './projects.css';
import React, {useState, useEffect} from 'react';
import Hero from '../../components/project/Hero';
import Nav from '../../components/project/Nav';
import Card from '../../components/project/Card';
import Modal from '../../components//project/Pop';
import axios from "axios"
 
  
function Projects() {
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [showModal, setShowModal] = useState(false)
  const [selectedItem, setSelectedItem] = useState(null)
  const [selectedModalImage, setSelectedModalImage] = useState(null)

  const api = axios.create({
    baseURL: 'ht://localhost:3000/projects'
  });

  const [projects, setProjects] = useState([]);

  useEffect(() => {
    api.get('/')
      .then(res => setProjects(res.data))
      .catch(err => console.error(err));
  }, []);

  const openModal = (title, modalImage) => {
    console.log(modalImage)
    setSelectedItem(title)
    setSelectedModalImage(modalImage)
    setShowModal(prev => !prev );
  };

  const filteredCards = projects.filter(item => {
    return item.category === selectedCategory || selectedCategory === 'All';
  });
  
  const cards = filteredCards.map(item => {
    return <Card
      key={item._id}
      image={item.image}
      title={item.title}
      modalImage={item.modalImage}
      price={item.price}
      onClick={() => openModal(item.title, item.Modalmage)}
    />
  });
  

  return (
    <div className="pApp">
      <Hero />
      <Nav handleSelectedCategory={setSelectedCategory} selectedCategory={selectedCategory} />
      <section className="pcards-list">
        {cards}
      </section>
      { showModal && <Modal 
        title={selectedItem}
        modalImage={selectedModalImage}
        showModal={showModal}
        setShowModal={setShowModal} /> 
      }
    </div>
  );
}

export default Projects;
import { useEffect, useState } from "react";
import axios from "axios";

const Modal = ({showModal, setShowModal, title, modalImage}) => {
  const [index, setIndex] = useState(0)

 
  const[modal, setModal] = useState([])
 
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.keyCode === 27) {
        close();
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  const next = () =>{
    if(index === modal.length - 1){
      setIndex(0)
    }else{
      setIndex(index + 1)
    }
  }
  const prev = () => {
    if(index === 0){
      setIndex(modal.length - 1)
    }else{
      setIndex(index - 1)
    }
  }
  const close = () => {
    setShowModal(prev => !prev );
  };

  return (
    <div className="modal">
      <div className="modal-content">
        <span onClick={close} className="close">&times;</span>
        <span className="next" onClick={next}> &#10094; </span>
        <span className="prev" onClick={prev}> &#10095; </span>
        {showModal ?  <div> <img className='modal-img' src={`../assets/Images/Projects/${modalImage}`} />   
          <h3>{title}</h3> 
        </div> : null }  
      </div>
    </div>
  );
};

export default Modal;

what to do

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[kamelnassar2828]

thank you bro can help me with the code?