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

…te new widget <ListItem>.
maratbn · Jun 30, 2018 · f3a9c63bc267c07bea7f701ffac256ca1e5e7f56 · f3a9c63
1 parent 9e5a0be
commit f3a9c63bc267c07bea7f701ffac256ca1e5e7f56
Unified Split

Showing with 13 additions and 3 deletions.

+13 −3 webpack_in/entry.jsx
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>