i need help on a react JS situation :
(sorry for the english, it's not my native language, hope it's clear)
i created a modal who is supposed to get the infos of a car, so i map my data, i get all the items. Then i'd like to : on click one of the item, the modal open with the informations of the car i just clicked on. but instead it keeps the same info (the last car "maped").
i tried to use the index key... or the id, but i can'y access what i want.
Any idea why ?
here my code
data.map((offer, index) => {
// console.log("offers map ---->", offer);
return (
<div key={offer.id}>
<div>
<p>{offer.headlines.description}</p>
</div>
<div>
<img
src={offer.images.small}
alt="picture"
onClick={() => {
setShowModal(true);
}}
/>
<ModalCar
title={offer.headlines.description}
configuration={offer.carGroupInfo}
image={offer.images}
onClose={() => {
setShowModal(false);
}}
show={showModal}
/>
</div>
here my modal
const ModalCar = (props) => {
console.log("props modal---->", props);
if (!props.show) {
return null;
}
return (
<div className="modal">
<div className="modal-content">
{/* <img src={image.large} alt="" /> */}
<div className="modal-header">
<h1 className="modal-title">{props.title}</h1>
</div>
<div className="modal-body">this is modal content</div>
<div className="modal-footer">
<button onClick={props.onClose} className="button-modal">
Close
</button>
</div>
</div>
</div>
);
};
export default ModalCar;
thanks for your time, it worked perfectly !!
can you try replacing onClick and show props with those
onClick={() => {setShowModal(offer.id)}}
show={showModal==offer.id}
Your current code makes all the modals show up together since they all rely on showModal being true, that's why we can try specifying the id of the one that should show
a better approach would be to have only one Modal component outside of your map function, then you can do something like
onClick={() => {
setShowModal(true)
setSelectedOffer(offer)
}}
then you can display the selected offer from state, and just re-render it by changing the state every time the user clicks on a different offer