I'm building a rudimentary shopping basket in React and I'm a bit stuck.

So, App holds the overall JSON data (just pulled from a local file), I envisage Cart will maintain the cart's state - perhaps an array of product IDs. It will also be used to display the cart's contents using a route /cart.

Ok, so the crux of the issue is I have ClothingList component, which builds the items by pushing a 'ClothingItem' component to an array. Within this component (ClothingItem), is the ubiquitous product display and 'Add to cart' button:

```
<div className="items__item">
 <h3>{props.item.name} - {props.item.brand}</h3>
 <div className="item__price">
    &pound;{props.item.price}
 </div>
 <div className="item__photo">
   <img src={process.env.PUBLIC_URL + '/product-imgs/' + props.item.photo} alt="" />
 </div>
 <div className="item__buttons">
   <button>Add to cart</button>
 </div>
</div>

```

Now, I need the button to call a function/instantiate the Cart, perhaps by passing the product ID. But how do I create this data flow? Note that Cart is not connected to ClothingItem in any way, so a callback function wouldn't do much good.

Effectively I need the cart's state to be globally accessible (if that means putting it in App, so be it).

Any help greatly appreciated. I've omitted Cart and some others from the code snippets because they are either incomplete or not important to the question.

---

APP:

```
import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import './main.css'
import './font-awesome.css'
import Header from './components/Header'
import ClothingList from './components/ClothingList'
import Home from './components/Home'
import Footer from './components/Footer'
import Cart from './components/Cart'
import clothesData from './components/json/clothes.data.json'

class App extends Component {

  componentDidMount() {
    this.setState({
      clothesData: clothesData
    })
  }

  render = () => {
    return (
      <Router>
        <div className="App">
          <div className="wrapper"> 
            <Header />
            <main>
              <Route exact path="/" 
                render={() => <Home clothesData={clothesData} />}
              />
              <Route 
                path="/clothes/:item" 
                render={props => <ClothingList {...props} clothesData={clothesData} />}
              />
              <Route 
                path="/cart" 
                component={Cart} 
              />
            </main>
          </div>
          <Footer />
        </div>
      </Router>
    )
  }
}

export default App;

```

---

CLOTHINGLIST:

```
import React from 'react'
import ClothingItem from './ClothingItem'
import ClothingNav from './ClothingNav'

const ClothingList = props => {
  const getQuery = () => {
    let queryJSON
    let displayItems

    if ( props.displayItems ){
      displayItems = props.displayItems
    } else {
      displayItems = props.match.params.item   
    }

    switch ( displayItems ) {
      case 'tshirts':
        queryJSON = props.clothesData.tshirts
        break
      case 'jumpers':
        queryJSON = props.clothesData.jumpers
        break
      case 'trousers':
        queryJSON = props.clothesData.trousers
        break
      case 'jackets':
        queryJSON = props.clothesData.jackets
        break
      case 'suits':
        queryJSON = props.clothesData.suits
        break
      default: 
        queryJSON = props.clothesData.tshirts
        break
    }

    return queryJSON
  }

  const getItems = () => {
    let items = []
    let queryJSON = getQuery()

    for ( let i = 0; i < queryJSON.length; i++ ) {
      items.push(
        <ClothingItem 
          key={i} 
          item={queryJSON[i]}
        />
      )
    }
    return items
  }

  return (
    <div>
      <div className="grid-container">
        <ClothingNav />
        <div className="heading">
          <h2>{props.displayItems}</h2>
        </div>
        <div className="items">
          {getItems()}
        </div>
      </div>
    </div>
  )
}

export default ClothingList

```

---

CLOTHINGITEM:

```
import React from 'react'

const ClothingItem = props => {
  return (
    <div className="items__item">
      <h3>{props.item.name} - {props.item.brand}</h3>
      <div className="item__price">
        &pound;{props.item.price}
      </div>
      <div className="item__photo">
        <img src={process.env.PUBLIC_URL + '/product-imgs/' + props.item.photo} alt="" />
      </div>
      <div className="item__buttons">
        <button>Add to cart</button>
      </div>
    </div>
  )
}

export default ClothingItem

```