How to update state of reactjs in realtime from an polkadotjs rpc api?

Question

  const unsubHeads = await data.rpc.chain.subscribeNewHeads((lastHeader) => {
            console.log(`: last block #${lastHeader.number} has hash ${lastHeader.hash}`);
           
        });

I'm using polkadot js rpc api for updating my reactjs (showing las block number in realtime), everything is working fine, the block number is also showing dynamically in above code, but I'm unable to set the new state inside the loop.

Answer 1

You can find an example of this in our Front-End Template https://github.com/substrate-developer-hub/substrate-front-end-template/blob/master/src/BlockNumber.js