reactjstypescriptreact-propsgetstream-io

getstream channel EmptyStateIndicator typescript error


ive been stuck for a while on this i just dont know what type it needs

    import React, { Fragment } from "react";
import { Channel, useChatContext } from "stream-chat-react";
import {
  ChannelInner,
  CreateChannel,
  EditChannel,
  TeamMessage,
} from "../index";

interface Props {
  isCreating: boolean;
  creatType: string;
  isEditing: boolean;
  setIsEditing: (value: boolean | ((prevVar: boolean) => boolean)) => void;
  setIsCreating: (value: boolean | ((prevVar: boolean) => boolean)) => void;
}


const ChannelContainer = ({
  isCreating,
  creatType,
  setIsEditing,
  setIsCreating,
  isEditing,
}: Props) => {
  const { channel } = useChatContext();
  if (isCreating) {
    return (
      <div className="channel__container">
        <CreateChannel creatType={creatType} setIsCreating={setIsCreating} />
      </div>
    );
  }
  if (isEditing) {
    return (
      <div className="channel__container">
        <EditChannel isEditing={isEditing} />
      </div>
    );
  }

  const EmptyState  = () => {
    <div className="channel-empty_container">
      <p className="channel-empty__first">
        This is the begining of the chat history.
      </p>
      <p className="channel-empty__second">
        Send messages, emojis ,attachments ,links ,and more!
      </p>
    </div>;
  };

  return (
    <div className="channel__container">
      <Channel
//>>>>>>>>>> this is the problem(  EmptyStateIndicator={EmptyState})
        Message={(messageProps, i) => <TeamMessage key={i} {...messageProps} />}
      >
        <ChannelInner setIsEditing={setIsEditing} />
      </Channel>
    </div>
  );
};

export default ChannelContainer;

the EmptyStateIndicator is always throwing an error that is the following :

(property) EmptyStateIndicator?: React.ComponentType | undefined Custom UI component to be displayed when the MessageList is empty, , defaults to and accepts same props as: EmptyStateIndicator

Type '() => void' is not assignable to type 'ComponentType<EmptyStateIndicatorProps> | undefined'.
  Type '() => void' is not assignable to type 'FunctionComponent<EmptyStateIndicatorProps>'.
    Type 'void' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)
Channel.d.ts(54, 5): The expected type comes from property 'EmptyStateIndicator' which is declared here on type 'IntrinsicAttributes & ChannelProps<DefaultStreamChatGenerics, CustomTrigger> & { children?: ReactNode; }'

i didnt find anything online but i found this in the Channel.d.ts file

Custom UI component to be displayed when the `MessageList` is empty, , defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)

EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];

Solution

  • Your EmptyState is not returning any value. Change it to

      const EmptyState  = () => {
        return (
          <div className="channel-empty_container">
            <p className="channel-empty__first">
              This is the begining of the chat history.
            </p>
            <p className="channel-empty__second">
              Send messages, emojis ,attachments ,links ,and more!
            </p>
          </div>
        );
      };