# Customizing React Message Display

**URL:** https://community.sendbird.com/t/customizing-react-message-display/5290
**Category:** Sendbird Chat UIKit
**Created:** [August 10, 2022, 12:40am UTC](https://community.sendbird.com/t/customizing-react-message-display/5290 "2022-08-10T00:40:52Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Jonathan\_Marbutt](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jonathan_marbutt/32/2859_2.png) [@Jonathan\_Marbutt](https://community.sendbird.com/u/Jonathan_Marbutt)
#### Post date: [August 10, 2022, 12:40am UTC](https://community.sendbird.com/t/customizing-react-message-display/5290/1 "2022-08-10T00:40:53Z")

</div>

We want to be able to have “note” messages in our conversations that only internal users can see. For example our users can chat with their clients but can put internal notes in the message. I have been told this is possible with custom message types, but how do I control this display on the React Native UI.

Other examples we want to allow users to insert “apps” like to schedule an appointment inline as a message type. Can we control how these messages are displayed in the React UI. This is very much like the example here:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/e/e1607e2ce24181a79979fcb8964412c88786b1e9.jpeg)

Or is that only when you do a completely custom UI?

---

<div class="post-metadata">

### Author: ![Jonathan\_Marbutt](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jonathan_marbutt/32/2859_2.png) [@Jonathan\_Marbutt](https://community.sendbird.com/u/Jonathan_Marbutt)
#### Post date: [August 10, 2022, 2:05am UTC](https://community.sendbird.com/t/customizing-react-message-display/5290/2 "2022-08-10T02:05:32Z")

</div>

I have got it down to this line and it doesn’t work:

```auto
renderMessage={(props: RenderMessageProps) => <>Test</>}

```

```auto
Type 'Element' is not assignable to type 'ComponentType<{}>'

```

What is it suppose to return

---

<div class="post-metadata">

### Author: ![Jonathan\_Marbutt](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jonathan_marbutt/32/2859_2.png) [@Jonathan\_Marbutt](https://community.sendbird.com/u/Jonathan_Marbutt)
#### Post date: [August 10, 2022, 2:46am UTC](https://community.sendbird.com/t/customizing-react-message-display/5290/3 "2022-08-10T02:46:01Z")

</div>

I have also tried this:

```auto
<Channel
  renderMessage={MyFileMessageComponent}
/>
const MyFileMessageComponent = ({ message, chainTop, chainBottom }) => {
  const {
    currentGroupChannel,
    scrollToMessage,
  } = useChannelContext();
  const globalStore = useSendbirdStateContext();
  // Use sendbirdSelectors and globalStore to implement onDeleteMessage, onUpdateMessage, onResendMessage.
  const deleteFileMessage = sendbirdSelectors.getDeleteMessage(globalStore);
  if (message.messageType === 'file') {
    return (
      <div className="custom-file-message">
        <button
          className="custom-file-message__delete-button"
          onClick={deleteFileMessage(currentGroupChannel, message)}
        />
        ... // Implement your code here.
      </div>
    )
  }
  return null;
}

```

---

<div class="post-metadata">

### Author: ![Jonathan\_Marbutt](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jonathan_marbutt/32/2859_2.png) [@Jonathan\_Marbutt](https://community.sendbird.com/u/Jonathan_Marbutt)
#### Post date: [August 10, 2022, 2:50am UTC](https://community.sendbird.com/t/customizing-react-message-display/5290/4 "2022-08-10T02:50:48Z")

</div>

I got it working with this example above.