Display data in modal-CodePudding

I would like to pass several data in a modal. My modal works fine but does not display the data I want. I would like to display the data BY ID, but I get all the data. This is my code :

App.js :

import React, { useState, useEffect } from "react";

import Modal from "./Modal";
import PlayCircleIcon from '@mui/icons-material/PlayCircle';

const App = (props) => {
    const [image, setImage] = useState([])
    const [showModal, setShowModal] = useState(false);

    const handleClick = () => {
        setShowModal((showModal) => !showModal);
    };

    useEffect(() => {
        ...
    }, []);


    return (
                <div>
                    {image.map((image) => {
                        return (
                            <div key={image.id}>
                                <img src={...}
                                    alt={image.title}
                                />
                                
                                <ExpandMoreIcon onClick={handleClick} />

                                {showModal && <Modal showModal={handleClick} image={image} />}
                            </div>
                        )
                    })}
                </div>
    );
}

export default App;

Modal.js :

import React from 'react';

const Modal = ({ showModal, image }) => {

    console.log("result", image);

    return (

            <div className="modal" > 
                    <div className='modal__content'>
                        <h1 className='modal__title'>{image.title}</h1>
                        <p className='modal__description'>{image.description}</h1>
                    </div>
            </div>
    );
}

export default Modal;

I think the problem comes from here image={image} in App.js because I get 8 tables in console.log("result", movie);

CodePudding user response：

{showModal && <Modal showModal={handleClick} image={image} />}

Your problem is your modal state is true/false value, so that's why once you trigger showModal, it will show all modals according to your number of images

The fix can be

Note that I modified your state name to align with new state values

const [modalImage, setModalImage] = useState(); //undefined as no image selected
const handleClick = (imageId) => {
   setModalImage(imageId);
};

Your elements will be like below

<ExpandMoreIcon onClick={() => handleClick(image.id)} />
{modalImage === image.id && <Modal showModal={() => handleClick(image.id)} image={image} />}

If you want to close the modal, you can reset modalImage state

onClick={() => handleClick(undefined)}

I just noticed that you also can move your modal out of the image loop, and potentially you can pass the entire image object to the modal too

The full implementation

import React, { useState, useEffect } from "react";

import Modal from "./Modal";
import PlayCircleIcon from '@mui/icons-material/PlayCircle';

const App = (props) => {
    const [image, setImage] = useState([])
    const [modalImage, setModalImage] = useState(); //no image selected

    const handleClick = (image) => {
        setModalImage(image);
    };

    useEffect(() => {
        ...
    }, []);


    return (
                <div>
                    {image.map((image) => {
                        return (
                            <div key={image.id}>
                                <img src={...}
                                    alt={image.title}
                                />
                                
                                <ExpandMoreIcon onClick={() => handleClick(image)} />
                            </div>
                        )
                    })}
                    {modalImage && <Modal showModal={() => handleClick(modalImage)} image={modalImage} />}
                </div>
    );
}

export default App;

CodePudding user response：

Both the map item and the image state array are named image in your code here;

image.map((image) => {
   /// your code
})

which could be the ambiguity that led to showing the whole array of data instead of one image in the array.