update variable automatic when api data is changed

Question

there in an button called add to card when button is clicked this action performed

<code>
function addtocart() {
    if (localStorage.getItem("userid")) {
      const itemdata = {
        ID: uuidv4(),
        userid: localStorage.getItem("userid"),
        productid: productid,
        quantity: 1,
      };
      fetch(
        "firebase url",
        {
          method: "POST",
          body: JSON.stringify(itemdata),
          headers: {
            "Content-type": "application/json",
          },
        }
      )
        .then((res) => res.json())
        .then((data) =>{
          if(data.name){
            notify();
            props.onchange(true);
          }
        }
          );
    } else {
      notify2();
    }
  }</code>

there is a counter in navbar where number of cart items displayed

<code>
 const count =
       fetchdata.data &&
    fetchdata.data.filter(
      (item) => item.userid === localStorage.getItem("userid")
    ).length;
  console.log(count);
</code>

this is the variable count which is displayed

you can visit it on (https://mobile-planet.vercel.app/singleproduct/1)

i tried to use state but it does not work.

Answer 1

If these are two different React JS component, react redux is the perfect solution for you.

You maintain the cart details in redux and listen it in header ( where i guess you are showing the count ), so whenever your state for cart will update, count will update accordingly.