Estoy haciendo mi primera interfaz React y estoy luchando un poco con el paso de información entre componentes. No estoy seguro de si me estoy perdiendo algo obvio o si la forma en que he mapeado las cosas es fundamentalmente defectuosa. Dado que esta es la primera vez que realmente juego con React, estoy tratando de evitar los ganchos si puedo, por lo que todo está basado en clases.

Aquí hay una captura de pantalla de cómo se ve la página en este momento: https://ibb.co/xDm0dyp

Y un gráfico estúpido que representa los componentes (y el estado que quiero mover): https://ibb.co/7WB2T4z

Cada una de esas tarjetas de camiseta se genera a medida que se desplaza hacia abajo en la página, cada una con una cita extraída de una API.

Como ilustro en mi hermoso cuadro, quiero que ese botón en mis tarjetas de camiseta lo envíe a una vista diferente donde puede seleccionar el tamaño, el color, etc. para la camiseta. Lo importante es que cada una de esas tarjetas de camiseta contiene una cita como accesorio, y los componentes más arriba no saben en última instancia qué cita contiene cada tarjeta. Dado que esta vista de "Detalles" va a reemplazar toda la vista de "Inicio", no creo que pueda ser un hijo de una tarjeta generada (¿o sí?), así que no estoy seguro de cómo obtener esa cotización.

Actualmente tengo un interruptor en el componente de mi aplicación:

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

shirtselect es mi vista para los detalles de la tarjeta, y no puedo simplemente pasar una cotización como accesorio en la etiqueta allí, porque la cotización se encuentra dos capas más abajo en un componente de la tarjeta generado a medida que se desplaza la página. Puedo obtener las cotizaciones en la vista de inicio sin problemas.

​

Cada una de esas tarjetas de camiseta es generada por el componente Inicio con este código:

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

​

Y las propias tarjetas incluyen este enlace (LinkContainer es de react-router-bootstrap, solo piénsalo como una etiqueta):

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

Actualmente incluyo ese accesorio de state siguiendo el consejo de este artículo , pero en última instancia eso requeriría el uso del gancho useLocation() , y he estado tratando de evitar el uso de ganchos hasta ahora.