# Direct Mapping

Direct mapping is the simplest use. The `direct` means that all props of your agent are directly mapped to destination associated container.

Make sure that you read about `through area` and `through containers` and `through agents` in [core concepts](/introduction/coreconcepts.md) before read this. And check that you already have it [installed and enabled](/basics/setup.md)

Let's suppose for example the area name is an `indicator`. Then the through container may be created with `throughDirect` like this:

```javascript
import {throughDirect} from 'react-through'

const Indicator = (props) => (
  <div>
    {props.balance}
  </div>
)

export default throughDirect('indicator')(Indicator)
```

this ballance indicator may be rendered at application top bar:

```javascript
const TopBar = (props) => (
  <div>
    Balance <Indicator /> USD
  </div>
)
```

But data is actually mapped from place where our indicator agent is rendered.

The simplest way to create agent just call agent factory function with same through area name like this:

```javascript
import {createAgent} from 'react-through'

const IndicatorAgent = createAgent('indicator')
```

Now rendering `IndicatorAgent` at any place of the react tree maps balance declaratively to indicator container:

```javascript
  <IndicatorAgent balance="1000" />
```

Only one such direct agent can be rendered in the through area. But any number of through containers can be created for the same area.

To get multiple agents for the same area, you need to organize a way how to differentiate agents from each other. Read about that in the next section.

Agent itself renders nothing but you can wrap it in component or you can create advanced agents described in advanced section.

Second argument of `throughDirect` function may be *the name of bearing prop* or *the bearing key builder function* which is described in the next sections.

The **next step** is communication from [multiple agents](/basics/manyagents.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://react-through.js.org/basics/direct.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.