I have a component Nav, it has two links. The first link leads to the main page, and the second opens the Hat component. In turn, it sends a request to the server and receives an array of objects representing the list of products, when clicked, the page with the price of this product should open.

My codesandbox

const Nav = () => { return ( <Router> <NavLink to={"/"}>{"Foo"}</NavLink> <NavLink to={"/male/hat"}>{"hat"}</NavLink> <Switch> <Route path={"/"} exact render={() => <div>'100'</div>} /> <Route path={"/male/:hat"} exact render={() => <Hat />} /> </Switch> </Router> ); }; const Hat = () => { const [arrProd, setArrProd] = useState([]); useEffect(() => { (async () => { await fetch(`https://foo0022.firebaseio.com//male/hat.json`) .then(res => res.json()) .then(arr => setArrProd(Object.values(arr).flat())); })(); }, []); console.log(arrProd); return ( <Fragment> {arrProd.map(({ to, id, price, title }) => ( <Fragment key={id}> <br /> <NavLink to={`/male/hat/${to}`}>{title}</NavLink> <Route exact path={`/male/hat/${to}`} render={() => <div>{price}</div>} /> </Fragment> ))} </Fragment> ); };

Suppose I click on the first link, I expect to see only the prices of products and links Foo hat. I can not write this code, but I can show in the picture:

Sample output

    0