Пометка изображения с использованием ReactJs

Question

Привет у меня есть одно требование, где мне нужно динамически помечать изображения. Например, на изображении ниже, мне нужно добавить и показать детали цены каждого элемента изображения при клике или наведении курсора на элементы, присутствующие на изображении

Как этого добиться, используя реагировать или javascript. Любая помощь в этом ..

Мой компонент:

render() {
    const { name, price, currency, image, url, isInCart } = this.props;

    return (
        <div className="product thumbnail">
            <img src={require(`${image}`)} alt="product" />
            <div className="caption">
                <h3>
                    <a href={url}>{name}</a>
                </h3>
                <div className="product__price">{price} {currency}</div>
                <div className="product__button-wrap">
                    <button
                        className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                        onClick={this.handleClick}>
                        {isInCart ? 'Remove' : 'Add to cart'}
                    </button>
                </div>
            </div>
        </div>
    );
}