Как добавить товар в корзину reactJS

 import React from 'react';
 class App extends React.Component{
  constructor(){
    super()
    this.state={
      aprankner:[
        {img:'https://static.nike.com/a/images/t_PDP_1280_v1/f_auto/sg39bcfrciytjymmnwy6/air-max-720-shoe-ntS5ql.jpg',name:'apranq 1',quantity:1,price:20000,},
        {img:'https://static.nike.com/a/images/t_PDP_1280_v1/f_auto/sg39bcfrciytjymmnwy6/air-max-720-shoe-ntS5ql.jpg',name:'apranq 2',quantity:1,price:20000,},
        {img:'https://static.nike.com/a/images/t_PDP_1280_v1/f_auto/sg39bcfrciytjymmnwy6/air-max-720-shoe-ntS5ql.jpg',name:'apranq 3',quantity:1,price:20000,},
        {img:'https://static.nike.com/a/images/t_PDP_1280_v1/f_auto/sg39bcfrciytjymmnwy6/air-max-720-shoe-ntS5ql.jpg',name:'apranq 4',quantity:1,price:20000,},
    ],
    cart:[]
    }
      
  }
  add=()=>{ }
  render(){
    return(
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-6">
            <h1 className="text-center">Товары</h1>
          
              {
                this.state.aprankner.map((item,index)=>{
                  return(
                    <div className="card" key={index} style={{width:200}}>
                    <img className="card-img-top" src={item.img} alt="Card"/>
              <div className="card-body">
                <h4 className="card-title">{item.name} </h4>
                <p className="card-text">{item.price} $</p>
                <button type="button"
                 className="btn btn-primary"
                 onClick={this.add}
                 >
                   Add to card
                </button>
              </div>
              </div>
                  )
                })
              }
             
          </div>
          <div className="col-md-6">
            <h1 className="text-center">Корзина</h1>
            <table className="table table-bordered table-dark">
    <thead>
      <tr>
        <th>Name</th>
        <th>quantity</th>
        <th>price</th>
        <th>actions</th>
      </tr>
    </thead>
    <tbody>
      {
        this.state.cart.map((item,index)=>{
         return(
          <tr key={index}>
          <td>{item.name}</td>
         <td>{item.quantity}</td>
         <td>{item.price}</td>
          <td>
            <button>+</button>
            <button>-</button>
          </td>
        </tr>
         )
        })
      }
    </tbody>
  </table>
          </div>
        </div>
      </div>
    )
  }
}