# \<EtherspotTransaction />

## Introduction

This component allows you to tell TransactionKit that there will be a blockchain transaction performed. This TransactionKit component is likely to be the one you use the most to send a basic transaction, such as sending ETH (or the native token [on any other chain we support](/master/chains-bridges-and-dexes.md)) to another blockchain address on the same chain.

You can have 1 or many `<EtherspotTransaction />` components inside an `<EtherspotBatch />` component to be sent at the same time (i.e. as part of the same "batch").

## Component Properties

| Property | Description                                                                                                                                                                                                                                                            |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`     | Optional: An ID (which can be a `string`, `number` etc) that allows you to define the ID of this batch 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.                                 |
| `to`     | The destination blockchain address, on the same chain. For example, if you are sending from the Polygon blockchain, make sure you sent it to another address on the Polygon blockchain.                                                                                |
| `value`  | This can either be a string represented in Ether or as a BigNumber (see example).                                                                                                                                                                                      |
| `data`   | Optional: An optional data object which can be read by the recipient (the `to` address), if it is a Smart Contract, to perform additional functions as part of the transaction (see example), or, to just store an arbitrary piece of data along with the transaction. |

## How to use

Below is an example of how to use the `<EtherspotTransaction />` component. We have given two exampels, one that is a simple transaction and one that calls a method on a Smart Contract.

### Sending some ETH

Sending some ETH (or any other native token for another blockchain) is one of the most common transactions to performed - for example, sending some ETH to a friend. Here is how you can do that.

```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 onEstimated={onEstimateReceiver}>
  <EtherspotBatch>
    {/*
    The following <EtherspotTransaction /> will send
    0.01 ETH to 0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b.
    */}
    <EtherspotTransaction
      to={'0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b'}
      value={'0.01'}
    />
    {/*
    You can add 1 or more <EtherspotTransaction />
    components here, and they will all be executed
    together and at the same time (i.e. as part of
    this batch).
     */}
  </EtherspotBatch>
</EtherspotBatches>
```

### Sending a transaction with a data object

Another type of transaction is sending a transaction with some data. Other dapps and services may read this data, or if you're sending some ETH (or other native token) to a Smart Contract, the Smart Contract may use this data to perform additional functions. Here how you can send some arbitrary data along with your transaction.

```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 onEstimated={onEstimateReceiver}>
  <EtherspotBatch>
    {/*
    The following <EtherspotTransaction /> will send
    0.01 ETH to 0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b
    and will include a data object containing the the
    message 'i am a teapot'.
    */}
    <EtherspotTransaction
      to={'0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b'}
      value={'0.01'}
      data={'i am a teapot'}
    />
    {/*
    You can add 1 or more <EtherspotTransaction />
    components here, and they will all be executed
    together and at the same time (i.e. as part of
    this batch).
     */}
  </EtherspotBatch>
</EtherspotBatches>
```

## :tada: Congratulations!

You have learned how to send transactions with TransactionKit. Remember to check out our CodeSandbox to see this in action. You can also fork it and try it out yourself!

:point\_right: [View or fork CodeSandbox](https://doh5im.csb.app/)


---

# 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://v1.etherspot.io/transaction-kit/react-components/less-than-etherspottransaction-greater-than.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.