создание функции, которая будет перемещать объект из одного массива (объектов) в другой каждый раз, когда нажимается кнопка выбранного продукта

Question

Я хочу создать function, который будет перемещать object из одного array (из objects) в другой каждый раз при нажатии кнопки выбранного продукта. Список покупок будет отображаться в HomePage component (1 array из objects) Список корзины выбранных товаров отобразится в Cart component (дополнительный массив)

Я что-то неправильно определил в state? или в return?

для меня действительно важно, чтобы он оставался таким простым, как я, потому что я хочу понять, прежде чем двигаться дальше ... также с без маршрутизаторов или крючки! спасибо! (:

Приложение. js

import React, { Component } from 'react'
import Cart from './components/Cart.js';
import HomePage from './components/HomePage.js';
import './App.css';

export default class App extends Component {
  state = {
    productsList: [
      { product: 'T-shirt', cost: '12$' },
      { product: 'Shoes', cost: '45$' },
      { product: 'Haircut Machine', cost: '60$' }
    ],
    cartList: [{ product: '', cost: '' }]
  }

  add = () => {
    this.props.add(this.state.index)
  }

  addToCart = (i) => {
    cartList = this.state.productsList.filter((element, index) => (index != i));
    this.setState({ productsList: [...cartList] })
  };

  render() {
    return (
      <div className="App">
        {this.state.productsList.map((element) => {
          return <HomePage product={element.product} cost={element.cost} index={i} add={this.addToCart} />

        })}
        <Cart />
      </div>
    )
  }
}

Домашняя страница. js

import React, { Component } from 'react'

export default class HomePage extends Component {

  constructor(props) {
    super(props)
    this.state = {
      product: '',
      cost: '',
      index: props.index
    }
  }

  render(props) {
    return (
      <div>
        <div>Price: {this.props.product}</div>
        <div>Product: {this.props.cost}</div>
        <button onClick={this.add}>Add To Cart</button>

      </div>
    )
  }
}

Корзина. js (Этот компонент сохранит и покажет новый массив объектов товаров)

import React, { Component } from 'react'

export default class Cart extends Component {
  render() {
    return (
      <div>
      </div>
    )
  }
}