Warning: Invalid prop `renderChatItem`

Sendbird Chat UIKit React
,
1

Hi,
I’m using sendbird-uikit 2.5.0 and trying to customize renderChatItem element.
New component is working correctly.
Only issue I see is: ‘Warning’ in console:

Warning: Failed prop type: Invalid prop `renderChatItem` of type `function` supplied to `ConversationScroll`, expected a single ReactElement.

Should I ignore this warning, or maybe there is solution to fix it?

Below my code:

// CustomizedApp.js
import React, { useState } from "react";

import {
  Channel as SBConversation,
  withSendBird
} from "sendbird-uikit";

import {MyCustomChatMessage} from './Message';

function CustomizedApp(props) {
  const [currentChannelUrl, setCurrentChannelUrl] = useState("sendbird_group_channel_123_abc");

  return (
    <div className="customized-app">
      <div className="sendbird-app__wrap">
        <div className="sendbird-app__conversation-wrap">
          <SBConversation
            channelUrl={currentChannelUrl}
            renderChatItem={({ message, onDeleteMessage, onUpdateMessage }) => (
                <MyCustomChatMessage
                    message={message}
                    onDeleteMessage={onDeleteMessage}
                    onUpdateMessage={onUpdateMessage}
                    channelUrl={currentChannelUrl}
                />
            )}

          />
        </div>
      </div>
    </div>
  );
}

export default withSendBird(CustomizedApp);

And Message.jsx :

// Message.jsx
import React from 'react';

export const MyCustomChatMessage = ({ message, onDeleteMessage, onUpdateMessage, channelUrl }) => {

    return  (
        <>
            <div>{message.message}</div>
            <div>{message.createdAt}</div>
            <hr/>
        </>
    )
}

ANPKdBBvS9sHcsZYhm5k
ANPKdBBvS9sHcsZYhm5k944×673 42 KB

2

Hello!

This looks like a wrong prop type given to the renderChatItem prop on our side, that expects a React Element instead of a function.

renderChatItem: PropTypes.element

Prop types are only checked in development mode and are just warnings. They are not affecting the production app and are mostly used for error-prevention reasons. So nothing to worry about, you are correctly using the UIKit renderChatItem prop.

I will make sure this is updated on our side :slight_smile:

1 Like
3

Hi,

This issue has been fixed here in 2.5.3!