# 5-1. Blocknumber Component

`src/components/BlockNumber.js`:

## `BlockNumber` component <a href="#blocknumber-component" id="blocknumber-component"></a>

1\) Full code\
2\) BlockNumber component's role\
3\) `getBlockNumber` method in detail\
4\) Call `getBlockNumber` intervally

### 1) Full code <a href="#id-1-full-code" id="id-1-full-code"></a>

```javascript
import React, { Component } from 'react'

import { cav } from 'klaytn/caver'

import './BlockNumber.scss'

/**
 * BlockNumber component gets the current block number every 1 second.(1000ms)
 * current block number can be fetched through caver-js library
 * which make a connection, communicating with klaytn node.
 * cf) If you want to connect to specific klaytn node,
 * change 'rpcURL' config in klaytn/caver.js
 */
class BlockNumber extends Component {
  /**
   * BlockNumber component has a 'currentBlockNumber' state.
   */
  state = {
    currentBlockNumber: '...loading',
  }

  /**
   * 'getBlockNumber' method works
   * 1) get current block number from klaytn node by calling 'cav.klay.getBlockNumber()'
   * 2) set 'currentBlockNumber' state to the value fetched from step 1).
   */
  getBlockNumber = async () => {
    const blockNumber = await cav.klay.getBlockNumber()
    this.setState({ currentBlockNumber: blockNumber })
  }

  /**
   * intervalId value will be populated by the value returned from `setInterval`.
   * intervalId will be used to clear interval, preventing memory leak.
   */
  intervalId = null

  /**
   * In 'componentDidMount' lifecycle, call 'getBlockNumber' method intervally.
   */
  componentDidMount() {
    this.intervalId = setInterval(this.getBlockNumber, 1000)
  }

  /**
   * In 'componentWillUnmount' lifecycle, clear interval
   * which calls getBlockNumber per 1000ms.
   */
  componentWillUnmount() {
    if (this.intervalId) clearInterval(this.intervalId)
  }

  /**
   * In 'render' lifecycle, show 'currentBlockNumber' state like below:
   * <p>Block No. {currentBlockNumber}</p>
   */
  render() {
    const { currentBlockNumber } = this.state
    return (
      <div className="BlockNumber">
        <p className="BlockNumber__current">Block No. {currentBlockNumber}</p>
      </div>
    )
  }
}

export default BlockNumber
```

### 2) BlockNumber component's role <a href="#id-2-blocknumber-component-s-role" id="id-2-blocknumber-component-s-role"></a>

`BlockNumber` component's role is showing Klaytn's current block number.\
It requests the current block number to the Klaytn node by calling `caver.klay.getBlockNumber()` every second. This component re-renders DOM through `this.setState({ currentBlockNumber: blockNumber })` upon receiving the response.

### 3) `getBlockNumber` method in detail <a href="#id-3-getblocknumber-method-in-detail" id="id-3-getblocknumber-method-in-detail"></a>

```javascript
/**
 * 'getBlockNumber' method works
 * 1) get current block number from klaytn node by calling 'cav.klay.getBlockNumber()'
 * 2) set 'currentBlockNumber' state to the value fetched from step 1).
 */
getBlockNumber = async () => {
  const blockNumber = await cav.klay.getBlockNumber()
  this.setState({ currentBlockNumber: blockNumber })
}
```

`getBlockNumber` method is declared as an async function. Declaring a function as async makes dealing with asynchronous value(promise) easy. `cav.klay.getBlockNumber` returns a promise, and the result can be handled easily by appending `await` keyword.

For further information about async-await keyword, see javascript's MDN site <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function>

After assigning the current block number returned from `cav.klay.getBlockNumber()` to `blockNumber`, we call `this.setState` React API. `this.setState({ currentBlockNumber: blockNumber })` literally sets the state property `currentBlockNumber` to `blockNumber`. `this.setState(nextState)` updates the current state and re-renders the component.

For further detail about React's this.setState and rendering mechanism, visit React's official site <https://reactjs.org/docs/state-and-lifecycle.html>

### 4) Call `getBlockNumber` intervally <a href="#id-4-call-getblocknumber-intervally" id="id-4-call-getblocknumber-intervally"></a>

```javascript
/**
 * In 'componentDidMount' lifecycle, call 'getBlockNumber' method intervally.
 */
componentDidMount() {
  this.intervalId = setInterval(this.getBlockNumber, 1000)
}
```

Since we want our tutorial app to show current block number lively, we call `getBlockNumber` every second (1000ms). We can use `setInterval` function to do this. `setInterval(func, delay)` calls the given function repeatedly with given delay. `setInterval` function returns an interval id which will be used to clear this interval later, so we store it to `this.intervalId` variable.

```javascript
/**
 * In 'componentWillUnmount' lifecycle, clear interval
 * which calls getBlockNumber per 1000ms.
 */
componentWillUnmount() {
  if (this.intervalId) clearInterval(this.intervalId)
}
```

When the component unmounts, stop getting the current block number by removing the interval.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/5.-frontend-code-overview/5-1.-blocknumber-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.