# \<EtherspotBatches />

## Introduction

The `<EtherspotBatches />` component is, at its simplest, a way to indicate to TransactionKit that you're about to start defining one or more `<EtherspotBatch />` components which may contain one or more `<EtherspotTransaction />` or `<EtherspotContractTransaction />` components.&#x20;

This tag helps TransactionKit keep itself organised, takes various component props to customise the transactions inside it and returns events when we need to [estimate](https://v1.etherspot.io/transaction-kit/react-hooks/useetherspottransactions/estimate).

The `<EhterspotBatches />` component takes any child components like taxt, buttons etc.

## Component Properties

<table><thead><tr><th width="182">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>skip</code></td><td>Optional: Takes a boolean value of <code>true</code> or <code>false</code>. Set <code>skip={true}</code> when you would like to skip these batches from being estimated and sent.</td></tr><tr><td><code>id</code></td><td>Optional: An ID (which can be a <code>string</code>, <code>number</code> etc) that allows you to define the ID of this batches group. We will use this ID if you provide it internally, but also allows you to use it to keep track elsewhere within your app.</td></tr><tr><td><code>onEstimated</code></td><td>Optional: Takes a function which accepts a parameter which is an estimation object. This is fired when an transaction cost estimation has been completed of all the contained <code>&#x3C;EtherspotBatch /></code> components. See the code example below to see how this is used.</td></tr></tbody></table>

## How to use

Below is an example of how to use the `<EtherspotBatches />` component.

{% code lineNumbers="true" %}

```jsx
// In your functional component or elsehwere
const onEstimateReceiver = (estimationData) => {
  console.log(
    'This is the cost estimate for all the batches',
    estimationData,
  );
}

// In your render or as a component...
<EtherspotBatches skip={true} onEstimated={onEstimateReceiver}>
  <EtherspotBatch>
    <EtherspotTransaction to={address0} value={amount0} />
  </EtherspotBatch>
  <EtherspotBatch>
    <EtherspotTransaction to={address1} value={amount1} />
    <EtherspotTransaction to={address2} value={amount2} />
  </EtherspotBatch>
</EtherspotBatches>
```

{% endcode %}

## :tada: Congratulations!

You can now see how we us the `<EtherspotBatches />` tag to enclose one or more of  `<EtherspotBatch />` tags.