# pulling it together

Previously we have used the API to query the [actual storage](tut-004.md), here we will build on that base to show something usable on-screen.

# component

[This component](../packages/app-example/src/comp-005.tsx) will focus mostly on the `render()` method and display on-screen. As with other examples, we first show the actual code and then provide a short walk-through of the relevant parts -

```js
class Comp extends React.PureComponent<ApiProps, State> {
  ...
  render () {
    const { intentions, proposals } = this.state;

    return (
      <table>
        <thead>
          <tr>
            <th />
            <th>Address</th>
            <th>Balance</th>
            <th>Proposals</th>
          </tr>
        </thead>
        <tbody>
          {intentions.map((address) => (
            this.renderAccount(address, proposals[address])
          ))}
        </tbody>
      </table>
    );
  }

  renderAccount = (address: string, proposals: number[] = []) => {
    return (
      <tr key={address}>
        <td><IdentityIcon size={24} value={address} /></td>
        <td>{address}</td>
        <td><Balance params={address} /></td>
        <td>{proposals.length}</td>
      </tr>
    );
  }
}
```

# walk-through

The render is straight-forward. For each of our intentions, render a row in a table showing the icon & address, the balance of the account and the number of proposals.

# actual output

![tut-005](https://raw.githubusercontent.com/polkadot-js/apps/master/examples/tut-005.png)

# next steps

[Next up](tut-006.md) we will expand our list, showing the actual activive validators.