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

Question

каждое поле содержит продукт, цену и возможность нажать кнопку «Добавить в корзину». Я хочу, чтобы при нажатии кнопки «Добавить в корзину» этот же продукт переместился в другой массив (который позже отображаются в виде списка купленных товаров на странице «Корзина» - еще одна составляющая) Что тут не работает? Буду очень рад помочь! (:

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

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

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

export default class App extends Component {

  state={

    
    flag: false
 
   }
 
  render() {
    return (
      <div className="App">
     
     
     
         <button onClick={()=>{this.setState({flag:true})}}>Cart</button>
         <button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
         {this.state.flag && (
               <div><Cart/></div>
              )
         }
        {!this.state.flag && (
               <div><HomePage index={i} add={this.addToCart}/></div>
              )
         }
     
       </div>
       
     
       )
     
     }
    }

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

import React, { Component } from 'react'

export default class HomePage extends Component {

constructor(props) {
    super(props)

    this.state = {

        Product: '',
        Price:'',
        tempCartList:'',
        CartList:[{product:'T-shirt', price:'12$'},{product:'Shoes', price:'45$'},{product:'Haircut Machine', price:'60$'}],
        index: props.index
         
    }
}

add=()=>{

    this.props.add(this.state.index)
}

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




render() {
    return (
        <div>
            
        <div>Price: </div><div>Product: </div><button onClick={this.add}>+</button>

        


        </div>
    )
}
}

Корзина. js

import React from 'react'

export default function Cart() {
    return (
        <div>
            This page will show the user all the products that have been added to the cart
        </div>
    )
}