Мне нужно по клику на кнопку "Add to Cart" достать id карточки товара

/// Card.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import Modal from '../Modal';
import userStyles from "./Card.module.scss"

class Card extends Component {
  
     render() {

        const {id, name, price, image, code, color} = this.props.phone

        return (
            <div className={userStyles.card}>
                <div className={userStyles.cardImg}>
                    <img 
                        className={userStyles.imagePhone}
                        src={this.props.phone.image} 
                        alt={this.props.phone.name}
                    />
                </div>
                <div className={userStyles.colorIphone}>
                    {this.props.phone.color}
                </div>
                <div className={userStyles.addToCardContainer}>
                    <span className={userStyles.price}>
                        <strong>
                            {this.props.phone.price}₴
                        </strong>
                    </span>
                    <button
                        onClick={() => this.props.openOrClose()}
                    //   onClick={() => this.props.onAdd(this.props.phone)}   
                      className={userStyles.addToCard}> 
                         {this.props.btnAdd} 
                    </button>
                </div>
                <Modal
                    closeBtn={this.props.closeBtn}
                    isOpen={this.props.isOpen}
                    onCancel={this.props.onCancel}
                    onSubmit={this.props.onSubmit}
                    btnFirstText={this.props.btnFirstText}
                    btnSecText={this.props.btnSecText}
                    header={this.props.header} 
                >
                     id: {id} <br/>
                     name: {name} <br/>
                     color: {color} <br/>
                     code: {code} <br/>
                     price: {price} <br/>
                </Modal>
            </div>
        )
    }
}

Card.propTypes = {
    closeBtn: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    header: PropTypes.string,
    btnFirstText: PropTypes.string,
    btnSecText: PropTypes.string,
    btnAdd: PropTypes.string,
    image: PropTypes.string,
    name: PropTypes.string,
    color: PropTypes.string,
    price: PropTypes.number
}

export default Card;


///CardComponent.jsx

import React, { Component } from 'react'
import axios from 'axios';
import PropTypes from 'prop-types';
import myStyles from "./CardComponent.module.scss"
import Card from '../Card/Card';

class CardComponent extends Component {
    state = {
        phones: []
    }   

    fetchSmt = () => {
      axios.get(`./content.json`)
        .then((res) => {
            this.setState({phones: res.data})
    })
        .catch(e => console.log(e))
    }

    componentDidMount() {
        this.fetchSmt()
    }

     render() {
        return (
             <div className={myStyles.container}>
                {this.state.phones.map((phone) => {
                    return (
                      <Card 
                        openOrClose={this.props.openOrClose}
                        closeBtn={this.props.closeBtn}
                        isOpen={this.props.isOpen}
                        onCancel={this.props.onCancel}
                        onSubmit={this.props.onSubmit}
                        // onAdd={this.props.onAdd}
                        header={this.props.header}
                        btnFirstText={this.props.btnFirstText}
                        btnSecText={this.props.btnSecText}
                        key={phone.id}
                        phone={phone}
                        btnAdd='Add to cart'
                      />
                    )
                })}  
            </div>
        )
    }
}

CardComponent.propTypes = {
  openOrClose: PropTypes.func,
  closeBtn: PropTypes.func.isRequired,
  isOpen: PropTypes.bool.isRequired,
  onCancel: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  header: PropTypes.string,
  btnFirstText: PropTypes.string,
  btnSecText: PropTypes.string,
  // onAdd: PropTypes.func.isRequired
}

export default CardComponent;