# Fetch list and display in component

Create **receiver** that will be fetch users list.

{% code title="/eventrix/receivers.js" %}

```jsx
import axios from 'axios';
import { EventsReceiver } from 'eventrix';

const fetchUsersReceiver = new EventsReceiver('fetchUsers', (eventName, eventData, stateManager) => {
    return axios.get('https://myDomain.com/users').then(({ data: usersList }) => {
        stateManager.setState('users', usersList);
    });
});

export default fetchUsersReceiver;
```

{% endcode %}

Register that **receiver** in **eventrix**.

```jsx
eventrix.useReceiver(fetchUsersReceiver)
```

Create **component** to display list of users.

{% code title="/components/UsersList.jsx" %}

```jsx
import React, { useEffect } from 'react';
import { useEventrixState, useEmit } from 'eventrix';

const UsersList = () => {
    const [users] = useEventrixState('users');
    const emit = useEmit();
    useEffect(() => {
        emit('fetchUsers');
    }, [emit])
    return (
        <div>
            {users.map(user => <div key={user.id}>{user.name} {user.surname}</div>)}
        </div>
    );
}

export default UsersList;
```

{% endcode %}