Как определить, с какого товара пришёл клик?

У меня есть сетка товаров, которые я беру из JSON файла и преображаю в карточку, но так, как клик приходящий на карточку индексируется не как клик по Col, а как клик на элемент(например название товара или цена), то немного не понятно, как вместе с кликом отправлять еще какие-нибудь данные, например у меня в JSON есть id на каждом объекте, можно ли этот id передавать с кликом? Моя сетка

//my Catalog
import React, {useEffect, useState} from 'react'
import itemList from '../catalog.json'
import { Container,Row,Col,Card } from 'react-bootstrap';

function ItemList() {
   const [catalog, setCatalog] = useState([])

   useEffect(() => {
       setCatalog(itemList.items)
   }, [])
   let hundleClick = (e) => {
       console.log(e)
   }
   return (
       <div>
            <br/><br/><br/><br/>
            <Container>
 
                <Row>
                    {
                        catalog.map(el => (
                                <Col className='mb-3 mt-3 colCard' sm ={12} md = {6} lg={4} xl={4} onClick = {hundleClick}> 
                                    <Card >
                                    <Card.Img variant="top" src={el.image} />
                                    <Card.Body>
                                        <Card.Title>{el.Name}<span className='priceSpan'>{el.price}p</span></Card.Title>  
                                    </Card.Body>
                                    </Card> 
                                </Col>
                        ))   
                    }
                </Row>
            </Container>
       </div>
   )
}

export default ItemList;
//My json
{
    "items":[
        {
            "id":1,
            "Name":"Календарь майя",
            "price":"800",
            "image":"/images/mayya.png",
            "shortAbout":"Древняя реликвия цивилизации Майя"
        },
        {
            "id":2,
            "Name":"Ключница",
            "price":"1500",
            "image":"/images/keyer.jpg",
            "shortAbout":"Защитит ключи от потери"
        },
        {
            "id":3,
            "Name":"Деревянный меч",
            "price":"950",
            "image":"/images/woodSword.jpg",
            "shortAbout":"Для настоящих богатырей, защитников родины!"
        },
        {
            "id":4,
            "Name":"Ключница",
            "price":"1500",
            "image":"/images/keyer.jpg",
            "shortAbout":"Защитит ключи от потери"
        },
        {
            "id":5,
            "Name":"Ключница",
            "price":"1500",
            "image":"/images/keyer.jpg",
            "shortAbout":"Защитит ключи от потери"
        },
        {
            "id":6,
            "Name":"Ключница",
            "price":"1500",
            "image":"/images/keyer.jpg",
            "shortAbout":"Защитит ключи от потери"
        },
        {
            "id":7,
            "Name":"Ключница",
            "price":"1500",
            "image":"/images/keyer.jpg",
            "shortAbout":"Защитит ключи от потери"
        },
        {
            "id":8,
            "Name":"Ключница",
            "price":"1500",
            "image":"/images/keyer.jpg",
            "shortAbout":"Защитит ключи от потери"
        }
    ]
}

Ответы (1 шт):

Автор решения: ден ден

Всё оказалось легко, достаточно обернуть функцию вызываемую в onClick в стрелочную функцию и оно будет работать как bind, примерно так я это реализовал

onClick = {(e) => {hundleClick(el.id)}} 

Подробнее можно почитать об этом методе здесь

→ Ссылка