# Multiple 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}
/>;
```

---

This page was last updated at 2025-08-19T14:51:38.775Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v12/guides/multiple_channel_lists/](https://getstream.io/chat/docs/sdk/react/v12/guides/multiple_channel_lists/).