Abstract CharacterString for resuability

js/Character.jsx

@@ -6,3 +6,4 @@ module.exports = (props) => {
   return <div {...props} className={className}>{props.children}</div>;
 };
 
+// TODO: Require that props.children be a string

js/CharacterString.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Character from './Character.jsx';
+
+module.exports = (props) => {
+  const text = '' + props.children;
+  const chars = text.split('');
+  return <div {...props}>
+    {chars.map(character => {
+      return <Character>{character}</Character>;
+    })};
+  </div>;
+};
+
+// TODO: Require that props.children be a string

js/Marquee.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
 
-import Character from './Character.jsx';
+import CharacterString from './CharacterString.jsx';
 
 
 class Marquee extends React.Component {
@@ -45,11 +45,10 @@ class Marquee extends React.Component {
       // TODO: Use the spread operator
       chars = start.concat(end).slice(0, 30);
     }
-    return <div onMouseDown={this.handleMouseDown}>
-      {chars.map(character => {
-        return <Character>{character}</Character>;
-      })};
-      </div>;
+    const text = chars.join('');
+    return <CharacterString onMouseDown={this.handleMouseDown}>
+      {text}
+    </CharacterString>;
   }
 }