How can I pass props from the Conversation object to to the MessageList object?

[SuppSoftAdminZ]

Looking at this example:
https://chatscope.io/storybook/react/?path=/docs/components-maincontainer--default-story
If a user clicks one of the conversation objects on the left (E.g. Lilly: Yes I can do that), we want the Message List on the right to be populated with the list of Messages for that Conversation.

I see there is an onClick event for the Conversation object but I can't tell which property to use in the payload that gets passed from the onClick event. And also, how to pass that payload to the MessageList object.

[supersnager]

@SuppSoftAdminZ Each conversation usually has a unique id. It can be a conference id or a user id depending on your implementation. You can use this id in the onClick handler.
How you keep the state in your application is up to you. For example you can use the local useState/useReducer, Redux, or React context.

Here is an example using the local state.

const conversations = [
  { id: 0, name: "Joe" },
  { id: 1, name: "Lilly" },
  { id: 2, name: "Patrick" }
];

// Messages are indexed by conversation id
const = messages = {
  1: [
    { message: "message 1"}, 
    { message: "message 2"}
  ],
 2: [
    { message: "message 3"}, 
    { message: "message 4"}
  ]
....
}

const [currentConversation, setCurrentConversation] = useState(0);

<ConversationList>
  {conversations.map( c => <Conversation key={c.id} name={c.name}
                                         onClick={() => setCurrentConversation(c.id)} />)  }
</ConversationList>

// Render message list from current conversation
<MessageList>
  {messages[currentConversation].map( (m,idx) => <Message key={idx} model={m} />)}
</MessageList>

This is a naive implementation, but you get the idea.

Good news:

This week I will be releasing a beta version of my new chat state management library.
It's based on react context and hooks.

It has some nice features:

• ready to use methods for adding messages
• tracking state of grouped messages
• tracking state of conversations and current conversation
• support for debounced typing indicator
• and so on....

I think this library will be useful for you.

[SuppSoftAdminZ]

Thanks!! I ended up using this on in the onClick event and it works perfectly.
onClick={() => convoClicked(node.messageId,node.messageSubject)}