58 lines
1.6 KiB
Markdown
58 lines
1.6 KiB
Markdown
# 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
|
|
|
|
|
|
|
|
# next steps
|
|
|
|
[Next up](tut-006.md) we will expand our list, showing the actual activive validators.
|