Encountering two children with the same key

[Keshavrajsinghal]

Issue

So I making a request messaging feature in my Nextjs react app which is an airbnb clone. A user is able to submit a message to request an airbnb from a host. At the backend, I am rerouting the user to their chat page with the host. I have shown below how the chat was originally initiated. Now, beyond just initializing an empty chat, I am also allowing a guest to send a message to the host. This creates the channel and using the client side api, automatically sends a first message from the guest to the host. However, when I do this it gives me a 'Encountered two children with the same key error'.

This is a snipper that shows how the channel was created.
useEffect(() => {
const initChat = async () => {
if (!currentUser || !currentUser.id || !currentUser.name) {
throw new Error('No current user')
}

  const userToken = await getToken(currentUser.id);

  if (!apiKey) {
    throw new Error('No API key found');
  }
  if (!recipient) {
    throw new Error('No recipient found')
  }
  const user: User = {
    id: currentUser.id,
    name: currentUser.name,
    image: currentUser.image
  }
  const channelId = [currentUser.id, recipient.id].join('_');

  const chatClient = StreamChat.getInstance(apiKey);
  setClient(chatClient);

  const connectedUser = await chatClient.connectUser({
    id: currentUser.id,
    name: currentUser.name,
    image: currentUser.image
  }, userToken);


  const channel = chatClient.channel('messaging', channelId, {
    members: [currentUser.id, recipient.id],
  });
  if (MessageStore.initialMessage) {
    await channel.sendMessage({
      text: MessageStore.initialMessage + counter
    })
    initChat();
return () => {
  if (client) {
    client.disconnectUser();
  }
  setChannel(undefined);
}

}, [currentUser!.id, recipient!.id])

Describe your issue here

Steps to reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
   etc...

Expected behavior

Project Related Information

Customization

Click To Expand

'use client';

import { SafeUser } from "@/app/types";
import { ChannelFilters, ChannelOptions, ChannelSort } from "stream-chat";
import { ChannelList } from "stream-chat-react";
import Avatar from "../Avatar";
import "../../layout.css"
import MessagingChannelPreview from "./MessagingChannelPreview";

interface MessagingSidebarProps {
filters: ChannelFilters;
sort: ChannelSort;
options: ChannelOptions;
user: SafeUser | null;
}

const MessagingSidebar: React.FC = ({
filters,
sort,
options,
user
}) => {
if (!user) {
throw new Error('User not found');
}
return (
<div className="w-[330px] border-r-black border-r-1 h-screen bg-gray-50 overflow-y-auto" style={{ height: 'calc(100vh - var(--navbar-height, 72px))' }}>

<div className={flex text-lg pl-2}>Messages

<ChannelList filters={filters} options={options} sort={sort} Preview={(props) => <MessagingChannelPreview {...props} />} />

)
}

export default MessagingSidebar
const bodyContent1 = (

<div className='flex flex-col w-full overflow-y-auto' style={{ height: 'calc(100vh - var(--navbar-height, 72px))' }}>

)
These are all of the streamchat components that I'm usin.

# N/A

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

This might seem a hard coded or a hackey way of implementing this functionality however, what i'm doing is that if a user wants to send a message to someone they don't already have a chat with, this functionality allows them to create the channel and then send the message. So when the user opens the chat window, the message is already there. Initially, I was able to see my messages even though my console was getting this issue but now I'm not even able to see these messages or at least they're not showing. Also, when the messages were showing up also they would always create two messages but that might be a React related error on my end.

Screenshots

Click To Expand

---

[khushal87]

Just to be sure, why are you using stream-chat-react-native in the next js app? I think it is a mistake. I will transfer this issue to stream-chat-react repo.

[MartinCupela]

@Keshavrajsinghal what version of stream-chat-react are you using? Could you please provide a reproduction in codesandbox by forking this template?

[Keshavrajsinghal]

@khushal87 Thank you for your response! To be clear, why do you think this is an issue? Should I be using another version?

[Keshavrajsinghal]

@MartinCupela Thank you so much for your response! I am using "stream-chat-react": "^11.3.0" for the purpose of this application. I will provide a reproduction right away.

[Keshavrajsinghal]

@MartinCupela I have recreated the relevant versions of my app here. Please note that in the message component, I'm trying to send a message that is being retrieved from another file. It is accessed through a state management library (zustand). The desired functionality here is that we want a user on the platform to be able to send a message request to someone else. The message is sent through another page and if the user accepts this request then the users are able to chat (you can see this through the change in body content). Whenever the user sends this message however, due to React's double rendering in development, the message gets sent twice which is undesirable. Is there a better way to implement this and overcome the 'encountering same children error'?
Additionally, at a higher level is there another way to implement this request message functionality? I'm also using Stream chat for the first time and am not sure if I am using the correct version based on my project requirement. Thank you for all your help!

[Keshavrajsinghal]

Hi @MartinCupela just following up here in case you were able to review the code. Would appreciate any help, thank you so much!

[MartinCupela]

Hey @Keshavrajsinghal, if the problem is that the message is getting sent twice and the message is created with the same id, then you should try to prevent sending the intro message for the second time. You should be able to check, whether it has already been sent.