Как передать значение данных из карты в пользовательский интерфейс Material ButtonBase onClick

Question

У меня есть массив данных, которые отображаются с картой и оборачиваются компонентом Material Ui ButtonBase. Я хочу получить имя данных, если нажата кнопка.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import ButtonBase from "material-ui/ButtonBase";

const styles = theme => ({
    card: {
        textAlign: 'center',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    cardButton: {
        display: "block",
        textAlign: "initial",
    }
});

class SimpleMediaCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    name: 'Javascript',
                    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGLecy3onT9rChTsw1BawUkuOxKE1r6yx_ViYXjqpBq8zsE_BI'
                },
                {
                    name: 'React',
                    image: 'https://lapraim.com/assets/partners/react-logo.png'
                }
            ]
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(evt) {
        alert('Name : ');
    }

    render() {
        const { classes } = this.props;
        const { data } = this.state;
        const { handleClick } = this;
        return (
            <div>
                {data.map(function(item, i) {
                    return (
                        <div key={i}>
                            <ButtonBase className={classes.cardButton} onClick={handleClick}>
                            <Card className={classes.card}>
                                <img src={item.image}  height='100px' alt={item.name}/>
                                <CardContent>
                                    <Typography component="h2">
                                        {item.name}
                                    </Typography>
                                </CardContent>
                            </Card>
                            </ButtonBase>
                        </div>
                    )               
                })}
            </div>
        )
    }
}

SimpleMediaCard.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleMediaCard);

Это демонстрационный код ссылка

В приведенном выше коде, если щелкнуть изображение, отобразится предупреждение. Я хочу показать имя данных на каждом нажатом изображении.

Может ли кто-нибудь помочь мне показать имя данных при каждом нажатии на картинку?

Answer 1

Ты имеешь в виду что-то подобное?

handleClick(item) {
    alert('Name : ' + item.name);
}

<ButtonBase className={classes.cardButton} onClick={() => handleClick(item)}>

Просто передайте элемент обработчику событий.