---
id: multiple_channel_lists
sidebar_position: 18
title: Multiple Channel Lists
---

This example will focus on the specific use case where there are two `ChannelList` components in the same application.

The event listeners of both lists, let's say A and B, will pick up all `new.message` events for every `channel`, regardless of which list the `message` is sent in.
If a message is sent in list B, the event listener in list A will also pick up the new `message` and bump the impacted `channel` to the top of the list. This is not the desired result for multiples lists, but there is a correct way to handle the routing of these messages.

## channelRenderFilterFn prop

The reason that a `channel` will automatically be bumped to the top of a list even though it's not actually part of the list is due to the default behavior.
The `ChannelList` components will retrieve a `channel` from `client.activeChannels` if the `channel` doesn't already exist.

By using the `channelRenderFilterFn` prop we can apply custom filtering logic to the list of `channels` that are rendered. Since we have access to the entire `channel` object, we can filter on type, custom fields, or other.

```tsx
const customChannelFilterFunction = (channels: Channel[]) => {
  return channels.filter(/** your custom filter logic */);
};

<ChannelList
  channelRenderFilterFn={customChannelFilterFunction}
  filters={filters}
  sort={sort}
  options={options}
/>;
```
