I simplified it for readability…,
There is more to it than I expected, is adding a modal really that tricky?
For any doubt don’t be afraid of asking questions.
Debugging it I noticed that I always get the last ‘image’ because I get the image only once it has been clicked and all the products have been loaded (map has finished its work) so the image it’s always the last one when I try to access it by using product.imge
I don’t seem to understand a way to get the image of each specific element, I get always the last element. I tried everything but to no avail. I think I should change approach.
In the preview I am clicking the modal of each product but it’s showing the same for all of them.
This is the preview of before I changed it to the code below.
Using the code below I get nothing.
The object I am passing as props:
products: [
{ name: 'Red', img: 'image1.png', id: 1 },
{ name: 'White', img: 'image2.png', id: 2 },
{ name: 'Pink', img: 'image3.png', id: 3 },
]
I am trying to pass this object as props
import React, { Component } from 'react';
import { Modal, Button } from 'react-bootstrap';
class Products extends Component {
state = {
show: false,
imge: '',
}
handleClose() {
this.setState({ show: false });
} handleShow() {
this.setState({ show: true,imge: event.target.imge});
}
render() {
const { products } = this.props;
const productsList = products.map(product => {
return (
<div className="Box" key={product.id}>
<button onClick={this.handleShow.bind(this)} imge={product.img} >Click to Modal</button>
<Modal show={this.state.show} onHide={this.handleClose.bind(this)}>
<Modal.Header closeButton>
{console.log(this.state.imge)}
<img src={this.state.imge} alt="..."/>
</Modal.Header>
</Modal>
</div>
)
});