I'm trying to switch from one component to another, and the second component needs to use one item from the array of the first component The problem is that the second component always goes through the entire array up to the last element and displays only it And I want to go through the index in onclick

enter image description here enter image description here

this is the componnet of the cards

``

import { useState } from "react";
import { Button } from "react-bootstrap"
import { Card } from "react-bootstrap"
import { useSelector } from "react-redux"
import ShowDetails from "./ShowDetails";

export default function Electronic() {

    const electronics = useSelector((state) => state.productReducer);
    const [modalShow, setModalShow] = useState(false);



    //debugger
    return (
        <>
            <center dir="rtl">
                <br></br><br></br><br></br><br></br>
                {electronics.map((item) => (
                    <>
                        <Card style={{ width: '18rem', display: "inline-block", backgroundColor: "white", textAlign: "center", borderColor:"#fade0f" , margin:5 }}>
                            <Card.Img variant="top" src={item.product_image} style={{ width: 100, height: 100 }} />
                            <Card.Body>
                                <Card.Title dir="rtl">{item.name}</Card.Title>
                                <Button style={{backgroundColor:"#fade0f", borderColor:"#fade0f", color:"black"}}
                                 variant="primary" onClick={() => setModalShow(true)}>פרטים</Button>
                            </Card.Body>
                            <ShowDetails
                                products={item}
                                show={modalShow}
                                onHide={() => setModalShow(false)}
                            ></ShowDetails>
                        </Card>

                    </>
                ))}
                <br></br><br></br><br></br><br></br>
            </center>
        </>
    )
};`

`

this is the model to show the detials:

``

import { useState } from 'react';
import { Image } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';


export default function ShowDetails(props) {

    const [amount, setAmount] = useState(1);
    return (
        <>
            <Modal
                {...props}
                size="sm"
                aria-labelledby="contained-modal-title-vcenter"
                centered
                style={{ textAlign: "center" }}
                animation={true}
            >
                <Modal.Header closeButton></Modal.Header>

                <Modal.Body dir='rtl'>

                    <Image variant="top" src={props.products.product_image} style={{ width: 200, height: 200 }} />
                    <Modal.Title id="contained-modal-title-vcenter" style={{ textAlign: "center" }}>
                        {props.products.name}
                    </Modal.Title>
                    <h5>{props.products.description}</h5>
                    <h4>{props.products.price * amount} ₪</h4>
                    
                    
                    <Button style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }} onClick={() => {
                        setAmount(Math.max(1, amount - 1))
                    }}>-</Button>
                    <h4 style={{ display: "inline-block", margin: 10 }}>{amount}</h4>
                    <Button style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }} onClick={() => {
                        setAmount(Math.min(props.products.qty, amount   1))
                    }}> </Button><br></br><br></br>
                    <Button style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black", width:200 }} onClick={() => {
                         setAmount(1)
                    }}>הוספה לסל</Button>
                </Modal.Body>

            </Modal>
        </>
    );
};`

`

I expected it to show me the image of the USB and finally it shows me the speakers for the computer which is the last member of the array How can I fix it?

CodePudding user response：

you can simply create a hook for the selected product

const [selectedProduct, setSelectedProduct] = useState({});

then when you click on one product you open the modal and also you store it in selectedProduct :

<Button
 style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }}
 variant="primary"
 onClick={() => {
  setModalShow(true);
  setSelectedProduct(item)
 }}
>
פרטים
</Button>

now you don't need to pass all the products to the model (if you don't need them) but only the selected one and make the ShowDetails component outside the map function:

<ShowDetails
  product={selectedProduct}
  products={electronics} // <-- if you need them
  show={modalShow}
  onHide={() => setModalShow(false)}
></ShowDetails>