Need some actual real life samples

[Johnne25]

ALL of the included samples use hardcoded messages and converstations.

I am struggling to get a real-life example on how to get the data from an array of converstations.messages to appear in the components.

Here is an example of getting the messages out and putting them in the MessageList.
This is the DOM to display the Chat Dialog (converstations are hardcoded for now, as I suspect the same method for getting them from an array would be simular to how it would be done for messages):

            <MainContainer responsive>   
                <Sidebar position="left" scrollable={true}>
                    <ConversationList>                                                     
                        <Conversation>
                            <Conversation.Content>
                                <div>OMT<br/>58SAM</div>
                            </Conversation.Content>
                            <Conversation.Operations />                             
                        </Conversation>
                        <Conversation>
                            <Conversation.Content>
                                <div>MTR<br/>58PETER</div>
                            </Conversation.Content>
                            <Conversation.Operations />                             
                        </Conversation>
                        <Conversation>
                            <Conversation.Content>
                                <div>CTS<br/>58MARK</div>
                            </Conversation.Content>
                            <Conversation.Operations />                             
                        </Conversation>
                    </ConversationList>
                </Sidebar>
                <ChatContainer>
                <ConversationHeader>
                  <ConversationHeader.Back />
                    <Avatar src={require('../../../components/layouts/icons/plus.svg')} name="Zoe" />
                    <ConversationHeader.Content userName="Zoe" info="Active 10 mins ago" />
                    </ConversationHeader>
                            **<ChatMessageList messages={this.props.conversations[selected].messages}/>**
                <MessageInput  attachButton={false} placeholder="Type message here" value={this.state.messageInputValue} onChange={val => this.setMessageInputValue(val)} onSend={this.setMessageSend}/>
              </ChatContainer>                         
            </MainContainer>

I want this to product the MessageList:

class ChatMessageList extends Component {
    render() {
        let messageItems;

        if (this.props.messages) {
            messageItems = this.props.messages.map((message, index) => {
                return <ChatMessage 
                    key={index}
                    isMyMessage={message.isMyMessage}
                    message={message} />;
            });
        }

        return (
            <div as={MessageList}>
                {messageItems}
            </div>            
        );
    }
}
export default ChatMessageList;

Messages are formatted here

import React, { Component } from 'react';
import { Message } from '@chatscope/chat-ui-kit-react';

class ChatMessage extends Component {
    render() {
        return (
            <Message model={{
                message:this.props.message,
                sentTime: this.props.sentTime,
                direction: this.props.direction,
                sender: this.props.sender,
                }}>
            </Message>
        );
    }
}
export default ChatMessage;

[supersnager]

@Johnne25
I'm not sure if I understand well your question, but I'll try to answer :).
Your code probably isn't working, because ChatContainer allows placing only children with specified types.
If you want to place ChatMessageList instead of MessageList you should add "as" property to your component.
Please read more about this technique here:
#7 (comment)
and here:
https://chatscope.io/storybook/react/?path=/docs/documentation-recipes--page#changing-component-type-to-allow-place-it-in-container-slot
and here is an example:
https://chatscope.io/storybook/react/?path=/docs/components-chatcontainer--wrapped-message-input#wrapped-messageinput

Instead changing the component type in the retured element:

return (
            <div as={MessageList}>
                {messageItems}
            </div>            
        );

You should add "as" property to your ChatMessageList directly:

<ChatMessageList as={MessageList} messages={this.props.conversations[selected].messages}/>

Please also don't use a second argument (index) of the map method as key in a list. It's not good practice. React documentation says:
"We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state" Read more here: https://reactjs.org/docs/lists-and-keys.html#keys

To generate a unique id you can use the wonderful https://github.com/ai/nanoid library. But be careful theirs react example is not quite good ;)

I'll try to prepare some new examples in the documentation.