Bootstrap-React Modals using map

Bootstrap-React Modals using map
0

#1

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>

            )
        });

#2

Could it have anything to do with the syntax errors in your products array? You have an extra comma in the first object and you’re missing a ' in the second object.


#3

No, I changed it because I wanted it to be easier to read and understand, before I changed it didn’t have any issues like that.