# Help with react chat SDK

**URL:** <https://community.sendbird.com/t/help-with-react-chat-sdk/8024>\
**Category:** Miscellaneous\
**Created:** [August 9, 2023, 6:44pm UTC](https://community.sendbird.com/t/help-with-react-chat-sdk/8024 "2023-08-09T18:44:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pagar22](https://avatars.discourse-cdn.com/v4/letter/p/ad7895/32.png) [@pagar22](https://community.sendbird.com/u/pagar22)\
**Post date:** [August 9, 2023, 6:44pm UTC](https://community.sendbird.com/t/help-with-react-chat-sdk/8024/1 "2023-08-09T18:44:56Z")

</div>

I’m using the react chat SDK and am creating a new channel using a simple fetch call and the API request. I get a proper channel URL back and pass it to the Channel component of the UI Kit, but everytime I create and open the channel using the fetch call, the channel screen and all the sendbird components become weird. They lose their colour and become transparent. Everything is fixed when I reload the screen but this is not ideal when I create a channel. Please help. This is my code:

import React, { useEffect, useState } from “react”;  
import Channel from “@sendbird/uikit-react/Channel”;  
import { navigateBack } from “utils/helpers”;  
import { GroupChannelInput } from “external/sendbird/components/group-channel-input.component”;

export const GroupChannelDetailScreen = ({ navigation, route }) =\> {  
const [channelUrl, setChannelUrl] = useState(route?.params?.channelUrl);

useEffect(() =\> {  
if (!channelUrl) {  
// Don’t create channel if user does not exist on sendbird  
const user\_ids = route?.params?.user\_ids;  
fetch(  
“https://APP\_ID.sendbird.com/v3/group\_channels”,  
{  
method: “POST”,  
headers: {  
“Content-Type”: “application/json; charset=utf8”,  
“Api-Token”: “API\_TOKEN”,  
},  
body: JSON.stringify({  
user\_ids: user\_ids,  
is\_distinct: true,  
}),  
}  
)  
.then(async (resp) =\> {  
if (resp.status === 200) {  
const channel\_url = (await resp.json())?.channel\_url;  
console.debug(`🐓 Fetched or Created Group Channel ${channel_url}`);  
setChannelUrl(channel\_url);  
navigation?.replace(“Messaging”, {  
screen: “GroupChannelDetail”,  
params: { channelUrl: channel\_url },  
});  
}  
})  
.catch((error) =\> console.error(`❌ Sendbird Error: ${error}`));  
}  
}, );

return (  
\<Channel  
channelUrl={channelUrl}  
onBackClick={() =\> {  
navigation.navigate(“Messaging”, {  
screen: “GroupChannelList”,  
});  
}}  
onChatHeaderActionClick={() =\>  
navigation.navigate(“Messaging”, {  
screen: “GroupChannelEdit”,  
params: { channelUrl: channelUrl },  
})  
}  
renderMessageInput={() =\> }  
/\>  
);  
};

---

<div class="post-metadata">

**Author:** ![Miyoung\_Han](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/miyoung_han/32/183_2.png) [@Miyoung\_Han](https://community.sendbird.com/u/Miyoung_Han)\
**Post date:** [October 10, 2023, 4:33pm UTC](https://community.sendbird.com/t/help-with-react-chat-sdk/8024/2 "2023-10-10T16:33:49Z")

</div>

Hi @pagar22

Welcome to the Sendbird Community!  
I tried to reproduce your issue, but unfortunately, I couldn’t do that.  
Could you try to run this sample?

> **[priceless-payne-gcfrf9 - CodeSandbox](https://codesandbox.io/s/priceless-payne-gcfrf9?file=%2Fsrc%2FApp.js)**
>
> priceless-payne-gcfrf9 by han.miyoung using @sendbird/uikit-react, loader-utils, react, react-dom, react-scripts