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