> For the complete documentation index, see [llms.txt](https://vytautaspranskunas.gitbook.io/react-state-rxjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vytautaspranskunas.gitbook.io/react-state-rxjs/core-concepts/components-with-actions.md).

# Components with Actions

Next we need to tell component that it will use `TodoActions` . We are doing this by decorating component with `@ComponentState` decorator

```jsx
@ComponentState(TodoStateActions)
export class TodoDescription extends ReactComponentWithStateActions<any, any, TodoStateActions> {
    render(){
        return <div>{ this.actions.todoDescriptionAsync }</div>
    }
}
```

or if you do not like provided base class you can do this

```jsx
@ComponentState(TodoStateActions)
export class TodoDescription extends React.Component implements HasStateActions<TodoStateActions> {
    actions: StorageStateActions;
    statePath: any;
    stateIndex?: string | number; // optional variable
    
    render(){
        return <div>{ this.actions.todoDescriptionAsync }</div>
    }
}
```

In this step three properties will be available from base class

* **statePath** - current state path that component is manipulating with
* **actions** - previously created actions class
* **stateIndex** - index item of the state if state is an array.

For example if we are iterating through `todos` and repeating repeating `todo.component` we need to pass not only `statePath` but `stateIndex` as well because `statePath` is `todos` and s`tateIndex` will be `n` So final path inside of `todo.component` will look like `todos[stateIndex]`&#x20;

```jsx
<TodoDescription statePath={this.statePath} stateIndex={index} />
```

`stateIndex` can also be set for in cases like when you want to pass item index via URL and want to load state according to it. More documentation on section: [Passing list item index via router](/react-state-rxjs/different-scenarios/passing-list-item-index-via-router.md)