how can I pass data that is calculated in one component to another component on different page?

how can I pass data that is calculated in one component to another component on different page?

Problem Description:

I have one component in which I calculate price based on model and extras that go with it. it looks like this:


  const name =;
  const modelPrice = productData.modelPrice; {/*Array that must contain: [key: number, model: string, price: number] */}

  {/*NewExtras START */}
  const extrasList = productData.extras; {/*Array that must contain: [ key: number, name: string, price: number, active: boolean (default: false) ] */}

  const [extrasListP, setExtrasListP] = useState(extrasList);

  const toggleExtras = (extra) => {
    const updatedExtrasList = => { === ? = ! : =;
      return ex;

  const activeExtras = extrasListP.filter((extra) => {

  const aExtrasList = => {
    return (
      <div key={extra.key}>{},&nbsp;</div>

  const sumExtras = activeExtras.reduce((previousValue, object) => {
    return previousValue + object.price;
  }, 0);

  {/*NewExtras END */}

  const [quantity, setQuantity] = useState(1);
  {/*Model variables START */}
  const [activeModel, setActiveModel] = useState(modelPrice[0].model);
  const [activePrice, setActivePrice] = useState(modelPrice[0].price);
  const modelPriceList = => {
    return (
      key = {item.key}
      className={ activePrice === item.price ? styles.activeModelItem : styles.modelItem}
      onClick={() => {setActiveModel(item.model); setActivePrice(item.price)}}
        | {item.model} |
  {/*Model variables END */}
  const [buttonText, setButtonText] = useState("Dodaj u korpu");

  const finalPrice = (activePrice + sumExtras) * quantity;

  const [korpa, setKorpa] = useState([]);
  const toSend = <>proizvod: {name} - Model: {activeModel} - Dodatno: - {aExtrasList} - Količina: {quantity} - Ukupno: {finalPrice}</>;

I want to create component called Cart.jsx to which I will send: toSend variable.
I also want it to stay chached so it stays when user refreshes page.

I was searching the internet for week and a half now and cant seem to find suitable answer for my situation. I hope that somebody will at least point me at right direction.

Solution – 1

You can do all of your calculations on the parent component and then assign that to a state hook. You can then pass that as props to the Cart.jsx component. Whenever you run your function to add to the total you can update a total state, then when you want to pass it to the cart you can via props.

const [total, setTotal] = useState(0);

const addTotalSum = () => {
    // Logic here for getting the total.
    setTotal(); // Set the returned total value here
<Cart totalVal={total} /> // Pass total into Cart component as props and then access it in the Cart with props.totalVal

Solution – 2

If you want to pass data from one page to another page, then these are the ways:

  1. pass data via state while routing
// react route v5
history.push("path", {state: yourdata})
// react router v6
navigate("path", {state: yourdata})
  1. Pass data in query string while routing
const queryString = `data=${JSON.stringify(yourdata)}`;
// attach above query in route path like this:
// react route v5
history.push(`path?${queryString}`, {state: yourdata})
// react router v6
navigate(`path?${queryString}`, {state: yourdata})
  1. Set data in local storage or session storage and access on next page.
const stringifyData = JSON.stringify(yourData);
localStorage.set("yourkey", stringifyData);

// Now access data on next page

In your case, you want to persist data. So option 3 will suit your use case

Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.