Estoy haciendo un proyecto personal de React.js . Tengo problemas con useParams . Uno de los problemas a los que me enfrento es que no puedo encontrar una identificación común para useParams . No puedo mostrar en pantalla los elementos que paso como accesorios en ItemDetails . Este es el ItemContainer .:

 import { useEffect, useState } from "react"; import ItemDetails from "../Itemdetails"; import { useParams } from "react-router-dom"; const showRace = async (raceId) => { const res = await fetch("https://www.betright.com.au/api/racing/todaysracing"); const json = await res.json().result; const race = Object.keys(json).find((findKey) => findKey === String(raceId)); if (!race) { throw new Error("No match found."); } console.log('race in showRace', race) return race; } const ItemContainer = () => { const [venue, setVenue] = useState({}); const { raceId } = useParams(); useEffect(() => { showRace(raceId) .then((races) => { setVenue(races) }) .catch(error => { console.error('error useEffect itemContainer', error) setVenue({}); }) }, [raceId]); console.log("venue container", venue); return <ItemDetails key={raceId} venue={venue} />; }; export default ItemContainer;

Este es el ItemDetails:

 const ItemDetails = ({ venue }) => { console.log("venue itemDetails", venue); return ( <> {Object.entries(venue).map(([key, value]) => ( <div key={key}> <h1>{key}</h1> {value.slice(0, 5).map((i, races) => ( <div key={i}> <p>{races.Venue}</p> </div> ))} </div> ))} </> ); }; export default ItemDetails;

Este es un enlace a un codesandbox con el código completo.