Soluciones
Hola Franco. Para poder manejar este tipo de situaciones React te permite hacer un par de cosas que te pueden servir. He dado una respuesta similar en esta pregunta por si la quieres ver más a detalle:
Forward Props ()
Crea una función en el componente padre de CarList
y CarDetails
y luego pasala por props a ambos componentes. De esta manera, ambos estarán utilizando la función que requieren.
Ventajas:
- Es fácil de implementar y no tienes que usar ninguna librería de control de estado por ejemplo
- Es bastante útil cuando el nivel del componente que lo necesita no está muy abajo en el arbol.
Desventajas:
- Si tienes que usar esa función en un sub sub componente de ambos componentes, puede ser un poco ineficiente e incómodo tener que pasar por props varias veces hasta llegar al componente que lo necesita.
Dame algo para copiar y pegar (?)
Esta sería básicamente la estructura que necesitas
function App() {
const [state, setState] = useState("")
const myUtilFunctionHandler = () => {
setState('Hago algo que le sirve a varios componentes')
}
<Switch>
<Route path="/" exact>
<CarsList message={state} onCreateMessage={myUtilFunctionHandler} />
</Route>
<Route path="/car-detail/:id">
<CarDetail message={state} onCreateMessage={myUtilFunctionHandler}>
</Route>
</Switch>
}
function CarsList(props) {
const { state, onCreateMessage } = props
return (
<div>
<span>{state}</span>
<button onClick={onCreateMessage}>Acción en común</button>
</div>
)
}
Lo mismo harías en el otro componente que necesitas (CarDetails)
React Context
Una opción bastante elegante para poder manejar estados de la aplicación con nodos bastante anidados. Deberías ver el enlace de la pregunta que te dejé arriba donde lo explico un poco mejor.
Con esta solución ya no debes preocuparte por pasar por props la información, sino que haces uso de una lógica Consumidor - Proveedor. El problema de usar esta forma, es que solo deberías usarlo para información que no esté en constante cambio, como un authContext por ejemplo. Cada vez que algo cambie en el context, todos los hijos que esten dentro del Provider van a ser re-renderizados y eso puede ser un problema si tus datos cambian constantemente. (Sobretodo en una app mediana - grande, para apps pequeñas no debería existir ningun problema)
Para mas información LEER ESTO ANTES DE USAR CONTEXT
Tu archivo: carContext.jsx
...
export const CarContext = React.createContext({
myUtilFunction: () => {},
carInfo: null
})
const CarContextProvider = ({children}) => {
const [carInfo, setCarInfo] = useState(null);
const myUtilFunction = (carInformation) => {
setCarInfo(carInformation)
}
return (
<CarContext.Provider value={{ carInfo, myUtilFunction }}>
{children}
</CarContext.Provider>
)
}
export default CarContextProvider
Luego envuelve tu componente App.jsx
<Switch>
<Route path="/" exact>
<CarContextProvider>
<CarsList />
</CarContextProvider>
</Route>
<Route path="/car-detail/:id">
<CarContextProvider>
<CarDetail>
</CarContextProvider>
</Route>
</Switch>
y por último en tu componente CarDetail
...
import { CarContext } from 'context/carContext.js'
function CarDetail () {
const {carInfo, myUtilFunction} = React.useContext(CarContext)
return (
<div>
<span>{carInfo}</span>
<button onClick={myUtilFunction}>Acción en común</button>
</div>
)
}
Librería de estados
Puedes utilizar una libería de control de estados como Redux, el cual maneja un solo store del que puedes consumir. Esto permite hacer básicamente lo mismo que Context junto con otras cosas que puedes leer en la documentación.