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

from chat-ui-kit-react.

@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.

from chat-ui-kit-react.