Как определить, с какого товара пришёл клик?
У меня есть сетка товаров, которые я беру из 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)}}
Подробнее можно почитать об этом методе здесь