getstream channel EmptyStateIndicator typescript error

Issue

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>
    );
  };

Answered By – Henrik Erstad

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.