Как использовать сопоставленное значение при вызове функции?

Question

У меня есть функция карты, отображающая возможные варианты обмена, но мне нужно передать id функции при нажатии на нее (текущий код ничего не регистрирует). Код ниже:

<div>{
    this.state.yourDrams.map((dram) =>
        <OfferTile
            key={dram.name}
            img={dram.image}
            name={dram.name}
            size={dram.size}
            onClick={ () => console.log(dram.id) }
        />
    )
}</div>

Где я ошибаюсь?

Заранее спасибо!

Изменить:

Вот компонент offerTile

import React, { Component } from 'react'
import "./offerTile.css"

export default class offerTile extends Component {

    render() {
        return (
            <div className="offer">
                {this.props.img === undefined ? null : <img alt="offer" width="120" src={this.props.img}/>}
                <span><h3>{this.props.name}</h3> - <em>{this.props.dist}</em> {this.props.abv !== undefined ? <p>{this.props.abv}%</p> : null}</span>
                <p>{this.props.desc}</p>
                <p><strong>{this.props.size}</strong></p>
            </div>
        )
    }
}

Answer 1

Ты отлично выглядишь. Я думаю, что это требует некоторой модификации.

<div>{
    this.state.yourDrams.map((dram) =>
        <OfferTile
            key={dram.name}
            img={dram.image}
            name={dram.name}
            size={dram.size}
            onHandleClick={ () => console.log(dram.id) }
        />
    )
}</div>

import React, { Component } from 'react'
import "./offerTile.css"

export default class offerTile extends Component {

    render() {
        return (
            <div className="offer" onClick={this.props.onHandleClick}>
                {this.props.img === undefined ? null : <img alt="offer" width="120" src={this.props.img}/>}
                <span><h3>{this.props.name}</h3> - <em>{this.props.dist}</em> {this.props.abv !== undefined ? <p>{this.props.abv}%</p> : null}</span>
                <p>{this.props.desc}</p>
                <p><strong>{this.props.size}</strong></p>
            </div>
        )
    }
}

Вы должны обработать onHandleClick в компоненте offerTile. Лучше всего не использовать встроенную функцию событий в качестве собственного имени реквизита.