2. Create Messages

If we want the app to be able to send / receive messages we'll need a Message component. Whenever I am going to be managing an array of major components I typically create a larger parent component to manage them. So in this section we will be creating two new components:

1. Message
2. MessageManager

Message

Create two new files ~/Content/message.jsx and ~/Content/messageManager.jsx. Each of these files will follow the same format in terms of content:

class ComponentName extends React.Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
};

export default ComponentName;

Notice how we export the component instead of rendering it through ReactDOM. This is because the base.jsx file will render all it's children so they don't have to worry about where they're going to be rendered.

Message Component

Next we need to decide on a structure for our message object (the object the Message component will render). We'll use a simple structure of {from: "string", message: "string"}. In the return section of the render method we can add these fields (we don't have to worry about where they're coming from, we just have to know what we're getting). A simple render method for the ~/Content/message.jsx component would be:

    render() {
        return (
            <div>
                {this.props.from}: {this.props.message}
            </div>
        )
    }

As stated above, the Message component doesn't know or care how it's getting the data. The data will be provided to the component through props.

MessageManager Component

The message manager component has a harder role than the Message component, it has to deal with an array of messages. We'll just call that array messages as it's an easy to remember name. To loop through arrays easily in Javascript we can use the map function. The map function has many great uses, but in this example we're using to to render multiple child components. The map function can be read more about here.

Now that we've made those decisions we can create the render method for the MessageManager, it should look something like this:

    render() {
        return (
            <div>
                {this.props.messages.map(msg => {
                    return (
                        <Message
                            from={msg.from}
                            message={msg.message}
                        />
                    )
                })}
            </div>
        )
    }

Just like on the Message component, we don't know or even care where the array is coming from, just that it's named "messages". However, unlike the Message component, we do care about passing properties. If you remember from the Message component it used two props, "from" and "message". Those props are being populated here.

<Message
    from={msg.from}
    message={msg.message}
/>

Because we're using a component outside of the scope of the file we'll have to had a link to the component. To do this add import Message from "./message.jsx"; to the top of the MessageManager.jsx file.

Rewrite Base.jsx

Now that we got the message components created we can add them to the base.jsx file. Just like on the MessageManager component we'll need to add an import reference. Add import MessageManager from "./messageManager.jsx"; to the top of the base.jsx file.

With that added we can add the MessageManager component to the render function. The new render function for base.jsx should look like:

    render() {
        return (
            <div>
                <MessageManager 
                    messages={this.props.messages}
                />
            </div>
        )
    }

Just like before, the base.jsx component doesn't care where the messages are coming from, just they it has a messages prop.

The messages Array

Now that all the components are created and setup we'll need to create the messages array. On top of the base.jsx file (above even the import statement) add

var messageArray = [
    {
        from: "Person 1",
        message: "Test Message"
    },
    {
        from: "Person 2",
        message: "Test Message 2"
    },
    {
        from: "Person 1",
        message: "Test Message 3"
    },
];

Lastly, update the render function of the base.jsx to:

// This renders the passed in component to the passed in DOM
ReactDOM.render(
    <Base 
        messages={messageArray}
    />, // The React.Component to be rendered
    document.getElementById('content') // Remember the div we ID'd 'content' on the _Layout.cshtml page?
);

Run webpack again (webpack on powershell/cmd/bash) and refresh/run the page. You now should see the messages.

My copy of the project (at this point in time) can be found on commit 9f105fac95dce76c4accdb94efb91300e9d03632