# Cannot get GroupChannel to renderHeader

**URL:** <https://community.sendbird.com/t/cannot-get-groupchannel-to-renderheader/9995>\
**Category:** React\
**Tags:** uikit, question\
**Created:** [August 28, 2024, 12:08am UTC](https://community.sendbird.com/t/cannot-get-groupchannel-to-renderheader/9995 "2024-08-28T00:08:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Morris](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/john_morris/32/5395_2.png) [@John\_Morris](https://community.sendbird.com/u/John_Morris)\
**Post date:** [August 28, 2024, 12:08am UTC](https://community.sendbird.com/t/cannot-get-groupchannel-to-renderheader/9995/1 "2024-08-28T00:08:15Z")

</div>

**[Problem/Question]**  
I’m trying to use the GroupChannel renderHeader without success. I can renderHeader on a GroupChannelList but not the GroupChannel. My log statements are not hit at all. Any ideas?

* * *

// If problem, please fill out the below. If question, please delete.  
**[UIKit Version]**  
// What version of the SDK are you using?

“@sendbird/uikit-react”: “^3.14.14”

**[Reproduction Steps]**  
Run the following code:

```auto

import React from 'react';
import { SendbirdProvider } from '@sendbird/uikit-react/SendbirdProvider';
import { GroupChannelList } from '@sendbird/uikit-react/GroupChannelList';
import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { GroupChannelHeader } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelHeader'
import '@sendbird/uikit-react/dist/index.css';

const CustomHeader = () => (
  <div className="custom-header">
    <h2>My Custom Group Channel Header</h2>
    {/* Add any custom header content here */}
  </div>
);

const CustomChannelPreview = ({ channel }) => (
  <div className="custom-channel-preview">
    <h3>{channel.name}</h3>
    <p>Last message: {channel.lastMessage?.message || 'No messages yet'}</p>
  </div>
);

const CustomGroupChannelHeader = ({ channel }) => (
  <div style={{ padding: '10px', borderBottom: '1px solid red' }}>
    <h2>RENDER ME PLEASE!!!</h2>
  </div>
);

const App = () => {
  const APP_ID = APP_ID
  const USER_ID = USER_ID;
  const [selectedChannel, setSelectedChannel] = React.useState(null);

  return (
    <SendbirdProvider appId={APP_ID} userId={USER_ID}>
      <div className="app-wrapper" style={{ display: 'flex', height: '100vh' }}>
        <div style={{ width: '300px', borderRight: '1px solid #ccc' }}>
          <GroupChannelList
            renderHeader={() => <CustomHeader />}
            renderChannelPreview={(props) => <CustomChannelPreview {...props} />}
            onChannelSelect={(channel) => {
              console.log('Selected channel:', channel);
              setSelectedChannel(channel);
            }}
            onBeforeCreateChannel={(channel) => {
              // Customize channel before creation
              channel.customType = 'my-custom-type';
              return channel;
            }}
          />
        </div>
        {selectedChannel && (
          <div style={{ flex: 1 }}>
            <GroupChannel
              channelUrl={selectedChannel.url}
              renderHeader={() => (
                <CustomGroupChannelHeader channel={selectedChannel} />
              )}
            />
          </div>
        )}
      </div>
    </SendbirdProvider>
  );
};

export default App;

```

**[Frequency]**  
// How frequently is this issue occurring?  
Always

**[Current impact]**  
// How is this currently impacting your implementation?  
Rendering a custom header is a requirement

---

<div class="post-metadata">

**Author:** ![bmusil](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@bmusil](https://community.sendbird.com/u/bmusil)\
**Post date:** [March 31, 2025, 7:13pm UTC](https://community.sendbird.com/t/cannot-get-groupchannel-to-renderheader/9995/2 "2025-03-31T19:13:49Z")

</div>

Replying since this never got an answer, we ended up using the `Channel` component instead of `GroupChannel`. Shortened example below:

```jsx
import { Channel } from '@sendbird/uikit-react';

//...

return <Channel renderChannelHeader={() => <ChannelHeader />} />

```

Am on 3.14.3 for the ui-kit