I am trying to set up a fake shopping cart. I have an array of objects. Each object is a fruit's name, price and quantity.

On one page, I displayed these items and their quantities and allow the user to adjust the values. After clicking checkout, I would like to use React Router to another page that will display the final price and quantities for each fruit and a total sum on another page.

Is there any tips for this? I can't find a solution to passing an array of objects across pages but I can find some for sending state with specific values.

code:

const Inventory = () => {
    const [inventory, setInventory] = useState(
        [
            {
                id:0,
                name: "lemons",
            
                count: 0,
                cost: 5.25
            },

            {
                id:1,
                name: "apples",
               
                count: 0,
                cost: 2.25
            },
            {
                id:2,
                name: "bananas",
                
                count: 0,
                cost: 1.00
            },
            {
                id:3,
                name: "avocado",
                
                count: 0,
                cost: 11.50
            },
        ]);

 return (
        <div>
            <h1>This is another items page</h1> 
            <ul className = "links">
                <Link to = "/">
                    <li> Home</li>
                </Link>
                <Link to = "/cart">
                   <li> Checkout </li>
                </Link>
            </ul>
)
}