I'm making my first React front end and I'm struggling a bit with passing information between components. I'm not sure if I'm missing something obvious or if the way I've mapped things out is fundamentally flawed. Since this is my first time really messing with React, I'm trying to avoid hooks if I can, so everything's class-based.

Here's a screenshot of what the page looks like right now: https://ibb.co/xDm0dyp

And a stupid chart representing the components (and the state I want to move): https://ibb.co/7WB2T4z

Each of those t-shirt cards is generated as you scroll down the page, each with a quote nabbed from an API.

As I illustrate in my beautiful chart, I want that button in my t-shirt cards to send you to a different view where you can select size, color, etc. for the shirt. The important thing is that each of those t-shirt cards contains a quote as a prop, and the components further up don't ultimately know what quote each card contains. Since this "Details" view is going to replace the whole "Home" view, I don't think it can be a child of a generated card (can it?) so I'm not sure how to get that quote to it.

Currently I have a Switch in my App component:

<Switch>  
  <Route exact path='/' render={() => <Home />}/>  
  <Route exact path='/shirtselect' render={() => <Shirtselect/>}/>  
</Switch>  

shirtselect is my view for card details, and I can't just pass a quote as a prop in the tag there, because the quote is sitting two layers down in a card component generated as the page is scrolled. I can get the quotes into the Home view just fine.

​

Each of those t-shirt cards is generated by the Home component with this code:

render() {
  return (
    <section id='market'>
      {this.state.quotes.map(quote => (<ShirtCard quote = {quote} addToCart = {this.props.addToCart} />))}
      <div ref={this.bottom} > </div>
    </section>
  )
}

​

And the cards themselves include this link (LinkContainer is from react-router-bootstrap, just think of it as a tag):

<LinkContainer to='/shirtselect' state={{quote: this.props.quote}}>
  <Button 
    size='lg' 
    variant='dark'>
    <i className="bi bi-bag-plus"></i> 
  </Button>
</LinkContainer>

I currently include that state prop on the advice of this article, but ultimately that would require use of the useLocation() hook, and I've been trying to avoid using hooks until now.