Extracted the logic for rendering individual list items into a separa…

…te new widget <ListItem>.
maratbn · Aug 5, 2018 · f3a9c63 · f3a9c63
1 parent 9e5a0be
commit f3a9c63
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/webpack_in/entry.jsx b/webpack_in/entry.jsx
@@ -74,6 +74,16 @@ class TextWidget extends React.Component {
       }
 }
 
+class ListItem extends React.Component {
+    render() {
+        return (<li>{ this.props.caption }</li>);
+      }
+}
+
+ListItem.propTypes = {
+    caption:                    PropTypes.string.isRequired
+  };
+
 class ListWidget extends React.Component {
     constructor(props) {
         super(props);
@@ -109,9 +119,9 @@ class ListWidget extends React.Component {
             <div style={ objStyleCommon }>
               <div style={ objStyleContent }>
                 <ul style={{ display: 'inline-block', textAlign: 'left' }}>
-                  { this.state.items.map((objItem, index) => (<li key={ objItem.id }>
-                                                                { objItem.caption }
-                                                              </li>)) }
+                  { this.state.items.map((objItem, index) => (<ListItem key={ objItem.id }
+                                                                        caption={ objItem.caption }
+                                                              />)) }
                 </ul>
               </div>
               <div>