# onMessageReceived for channelList in React

**URL:** <https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255>\
**Category:** React\
**Tags:** uikit\
**Created:** [May 16, 2021, 12:33pm UTC](https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255 "2021-05-16T12:33:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![satyanarayana\_ruppa](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/satyanarayana_ruppa/32/1219_2.png) [@satyanarayana\_ruppa](https://community.sendbird.com/u/satyanarayana_ruppa)\
**Post date:** [May 16, 2021, 12:33pm UTC](https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255/1 "2021-05-16T12:33:53Z")

</div>

In React app, I have integrated the Channel and ChannelList. We have to display the browser notifications on messageReceived, how can we implement this function and need to add &remove the handler properly with . Would someone help me to achieve it?

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [May 17, 2021, 2:25pm UTC](https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255/2 "2021-05-17T14:25:26Z")

</div>

Hey @satyanarayana_ruppa,

To verify, you’re looking for recommendations on how to show browser notifications when a new message is received via the `onMessageReceived()` handler?

---

<div class="post-metadata">

**Author:** ![satyanarayana\_ruppa](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/satyanarayana_ruppa/32/1219_2.png) [@satyanarayana\_ruppa](https://community.sendbird.com/u/satyanarayana_ruppa)\
**Post date:** [May 19, 2021, 12:20pm UTC](https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255/3 "2021-05-19T12:20:31Z")

</div>

Hi @Tyler, Sorry for the misunderstandings. I have code to show browser notifications, but I am not sure where to add the onMessageReceived handler when we use Channel and ChannelList UIKit components. but I could fix it by following below approach.

integrate sendbird in react app  
render Channel&ChannelList components.  
when sendbird sdk is ready(not undefined), add the handler in useEffect.

Thanks for your response

---

<div class="post-metadata">

**Author:** ![vibonacci](https://avatars.discourse-cdn.com/v4/letter/v/7ba0ec/32.png) [@vibonacci](https://community.sendbird.com/u/vibonacci)\
**Post date:** [February 4, 2022, 8:27am UTC](https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255/4 "2022-02-04T08:27:46Z")

</div>

onMessageReceived is not related to those UIKit React components. It’s part of the main Chat SDK under ‘ChannelHandler’

In one of your components that is a child of `<SendBirdProvider>` use the following code.

```auto
  const sendbirdContext = useSendbirdStateContext();
  const sb = sendBirdSelectors.getSdk(sendbirdContext);

  const channelHandler = new sb.ChannelHandler();
  channelHandler.onMessageReceived = function (channel, message) {
    console.log('onMessageReceived!', channel, message);
    // send browser notif!
  };

```

---

<div class="post-metadata">

**Author:** ![cgsully](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/cgsully/32/4454_2.png) [@cgsully](https://community.sendbird.com/u/cgsully)\
**Post date:** [August 30, 2023, 5:52am UTC](https://community.sendbird.com/t/onmessagereceived-for-channellist-in-react/2255/5 "2023-08-30T05:52:05Z")

</div>

For everyone who is stumbling into this now in mid-2023, this is what works for me:

```auto
import { useEffect } from "react";

import Channel from "@sendbird/uikit-react/Channel";
import GroupChannelHandler from "@sendbird/uikit-react/handlers/GroupChannelHandler";

import useSendbirdStateContext from "@sendbird/uikit-react/useSendbirdStateContext";
import sendbirdSelectors from "@sendbird/uikit-react/sendbirdSelectors";

export function CustomChannel({ channelUrl, onMessageReceived }) {
  const sendbirdContext = useSendbirdStateContext();
  const sdk = sendbirdSelectors.getSdk(sendbirdContext);

  useEffect(() => {
    if (!sdk || !sdk.groupChannel) return;
    let UNIQUE_HANDLER_ID = "some_unique_id";
    const groupChannelHandler = new GroupChannelHandler();
    sdk.groupChannel.addGroupChannelHandler(
      UNIQUE_HANDLER_ID,
      groupChannelHandler
    );
    groupChannelHandler.onMessageReceived = onMessageReceived;
    return () => {
      sdk?.groupChannel?.removeGroupChannelHandler(UNIQUE_HANDLER_ID);
    };
  }, [sdk]);

  return (
    <div className="sendbird-app__wrap">
      <Channel channelUrl={channelUrl} />
    </div>
  );
}
export default CustomChannel;

```

Key things that helped:

1. running useEffect upon change to sdk. sdk might not be initialized during first few calls to useEffect.
2. using GroupChannelHandler and sdk.groupChannel.addGroupChannelHandler is the way to go for v4. I had trouble getting some of the older methods to work (e.g. sdk.ChannelHandler)

Good luck!