# useFetchToState

This hook fetch data and put it to state.

{% hint style="info" %}
If You want use hooks, hocs or component decorator You must use EventrixProvider in Your application. Go to "EventrixProvider" page in "Context" section for more details.
{% endhint %}

{% hint style="warning" %}
This hook is not recomended. Please use fetchToStateReceiver if You can. 
{% endhint %}

{% tabs %}
{% tab title="Javascript" %}

```jsx
import React from 'react';
import axios from 'axios';
import { useFetchToState } from 'eventrix';

const removeUserFetch = (userData, state, emit) => {
    return axios.delete(`http://somedomain.com/users/${userData.id}`).then(() => {
        return state.users.filter(item => item.id !== userData.id);
    });
}

const DeleteUserButton = ({ user }) => {
    const [emitFetch] = useFetchToState('users:remove', 'users', removeUserFetch);
    
    const removeUser = useCallback(() => {
        emitFetch(user);
    }, [emitFetch, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
import axios from 'axios';
import { useFetchToState } from 'eventrix';
import { EmitI } from 'eventrix/types/interfaces'
import { User, StoreState } from './interfaces';

const removeUserFetch = (userData, state, emit): Promise<User[]> => {
    return axios.delete(`http://somedomain.com/users/${userData.id}`).then(() => {
        return state.users.filter(item => item.id !== userData.id);
    });
}

interface PropsI {
    user: User;
}

const DeleteUserButton = ({ user }: PropsI) => {
    const [emitFetch] = useFetchToState<User>('users:remove', 'users', removeUserFetch);
    
    const removeUser = useCallback(() => {
        emitFetch(user);
    }, [emitFetch, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
```

{% endtab %}
{% endtabs %}