# Implementing on react

**URL:** <https://community.sendbird.com/t/implementing-on-react/4859>\
**Category:** Miscellaneous\
**Tags:** react-js\
**Created:** [June 9, 2022, 5:33pm UTC](https://community.sendbird.com/t/implementing-on-react/4859 "2022-06-09T17:33:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Akshay\_Malta](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/akshay_malta/32/2281_2.png) [@Akshay\_Malta](https://community.sendbird.com/u/Akshay_Malta)\
**Post date:** [June 9, 2022, 5:33pm UTC](https://community.sendbird.com/t/implementing-on-react/4859/1 "2022-06-09T17:33:02Z")

</div>

![Screenshot 2022-06-09 at 10.52.54 PM](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/8/87e9240c183c484949ed331007f5f685e67bc183.png)

Hi, i am trying to implement the chat feature  
I have added SendBirdProvider at top level  
In one component i am sending the message and i am able to send the message  
but issue is when i am trying to recieve all the message then i am not getting it because in useeffect the sdkInstance is not changing and currentChannelUrl is null

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [June 10, 2022, 5:36am UTC](https://community.sendbird.com/t/implementing-on-react/4859/2 "2022-06-10T05:36:59Z")

</div>

Hello Akshay, welcome to sendbird. It would be helpful for us if you share a minimum reproducible snippet/repo to get a better view of your project? For this specific question, we need to see your component system

---

<div class="post-metadata">

**Author:** ![Akshay\_Malta](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/akshay_malta/32/2281_2.png) [@Akshay\_Malta](https://community.sendbird.com/u/Akshay_Malta)\
**Post date:** [June 10, 2022, 7:34am UTC](https://community.sendbird.com/t/implementing-on-react/4859/3 "2022-06-10T07:34:26Z")

</div>

Here is the link

> **[sharp-voice-w5ju5n - CodeSandbox](https://codesandbox.io/s/sharp-voice-w5ju5n?file=%2Fsrc%2FApp.js)**
>
> sharp-voice-w5ju5n using react, react-dom, react-scripts, reactstrap, sendbird-uikit, uuid

please check the console after sending the message, in panelreadmessage is not running

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [June 13, 2022, 5:28am UTC](https://community.sendbird.com/t/implementing-on-react/4859/4 "2022-06-13T05:28:40Z")

</div>

So, the message that you send from your side cannot be listened through ChannelHandler…  
If you really want to show the message that you send, you have to keep that message(which would be pending first, then successful) in your top level component

I think this repo can lead you in the right direction: (make sure to use the branch v3\_stable)

> **[GitHub - sendbird/sendbird-chat-sample-react at v3\_stable](https://github.com/sendbird/sendbird-chat-sample-react/tree/v3_stable)**
>
> v3\_stable