mode zoom toolbar and message area to separate components

1 files changed, 23 insertions, 0 deletions

diff --git a/src/MessageArea.js b/src/MessageArea.js
new file mode 100644
index 0000000..bef505d
--- /dev/null
+++ b/src/MessageArea.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class MessageArea extends Component {
+  render() {
+    let messages = this.props.messages.map(({key, message}) => {
+      return <li key={key}>{message}</li>
+    });
+
+    return (
+      <div className="message-area">
+        <ul>
+          {messages}
+        </ul>
+      </div>
+    );
+  }
+}
+
+MessageArea.defaultProps = {
+  messages: []
+};
+
+export default MessageArea;
\ No newline at end of file