React native props declaration confusion

Question

I have came across this SendBird With React-Native chatting app and i am studying the code structure of it. The following line of codes is causing me confusion:

Function.js

export const sbAdjustMessageList = (list) => {
return list.map((message, i) => {
    message['time'] = sbUnixTimestampToDate(message.createdAt);
    message['readCount'] = 0;
    if (message.isUserMessage() || message.isFileMessage()) {
        message['isUser'] = (message.sender.userId === SendBird.getInstance().getCurrentUserId());
    } else {
        message['isUser'] = false;
    }
    if (message.sender) {
        message.sender['isShow'] = true;
        if(!message.sender.profileUrl) {
            message.sender.profileUrl = 'default-image';
        }
    }

    if (i < list.length - 1) {
        let prevMessage = list[i + 1];
        if (message.isUserMessage() || message.isFileMessage()) {
            if (prevMessage.isUserMessage() || prevMessage.isFileMessage()) {
                if (prevMessage.sender.userId === message.sender.userId) {
                    message.sender.isShow = false;  
                }
            }
        }
    }
    return message
});

}

Main.js

_renderFileMessageItem = rowData => {
    const message = rowData.item;
    if (message.isUserMessage()) {
      return <TextItem isUser={message.isUser} message={message.message} />;
    } else if (sbIsImageMessage(message)) {
      return <ImageItem isUser={message.isUser} message={message.url.replace("http://", "https://")} />;
    } else {
      return <FileItem isUser={message.isUser} message={message.name} />;
    }
  };

In Function.js, the is this declaration of message['isUser'] then it is exported to Main.js to be used. However in Main.js, isUser becomes a props to the imported component. Also, there is no initiation of isUser in constructor class.

My question is what does message['isUser'] here means? Is it a javascript thing or a redux features (The sample app uses redux and react-redux)?

Thank you!

Answer 1

So, with the given code, it can be inferred that the function sbAdjustMessageList takes a list ie an array of messages and formats all the messages inside it and returns the array of formatted messages while the isUser being a key in each message.

However in Main.js, _renderFileMessageItem is a kind of item renderer for a ListView and each item rendering receives a message. Its is quite clear that the rowData is having a message item inside it and this message is one of the messages from the array which the sbAdjustMessageList function returned (as this array must have been provided to the ListView).

Coming to isUser being a prop for TextItem, its JSX , there is no necessity to provide prop declaration to the components while constructing.Although its always better to write quality code and declare all your prop and types with PropTypes

and message['isUser'] is just javascript 's way of manipulating object properties.

Hope this helps. Happy Coding :)