HomeWork/project/my-project/src/components/goodCardCharacteristic.js

import { Card, Image, Button  } from 'antd';
import { connect } from 'react-redux';
import { actionCartAdd } from '../action';

const backendURL = 'http://shop-roles.asmer.fs.a-level.com.ua';

const Good = ({good: {name, images, description, price, _id}, onAdd}) => { console.log(name)
  return (
    <Card title={name} style={{ width: 350 }} hoverable>
    {images && images[0] && images[0].url && <Image width={300} src={backendURL + '/' + images[0].url} />}
    <p>{description}</p>
    <p>{price} грн</p>
    <Button onClick={() => onAdd({_id, name, price, images})}>Купить</Button>
  </Card>
  )
}

const mapStateToProps = state => ({good: state.promise.goodById?.payload || {}})

const GoodCardCharacteristic = connect(mapStateToProps, {onAdd: actionCartAdd})(Good);

export default GoodCardCharacteristic;