Added logic to detect when a <ListItem> checkbox is changed, and to u…

…pdate the <ListWidget> React 'state' accordingly for the corresponding item.
maratbn · Aug 5, 2018 · 9ebd9ca · 9ebd9ca
1 parent b76d71b
commit 9ebd9ca
Showing 1 changed file with 22 additions and 2 deletions.
diff --git a/webpack_in/entry.jsx b/webpack_in/entry.jsx
@@ -77,13 +77,15 @@ class TextWidget extends React.Component {
 class ListItem extends React.Component {
     render() {
         return (<li><input type='checkbox'
-                           checked={ this.props.isChecked }/>{ this.props.caption }</li>);
+                           checked={ this.props.isChecked }
+                           onChange={ this.props.onChangeChecked }/>{ this.props.caption }</li>);
       }
 }
 
 ListItem.propTypes = {
     caption:                    PropTypes.string.isRequired,
-    isChecked:                  PropTypes.bool.isRequired
+    isChecked:                  PropTypes.bool.isRequired,
+    onChangeChecked:            PropTypes.func.isRequired
   };
 
 class ListWidget extends React.Component {
@@ -103,6 +105,17 @@ class ListWidget extends React.Component {
             total_added: state.total_added + 1
           });
 
+        this._mutateStateToUpdateItemChecked = (state, id, isChecked) => ({
+            ...state,
+            items: state.items.map(objItem => (
+                objItem.id === id ? {
+                                        ...objItem,
+                                        is_checked: isChecked
+                                      }
+                                  : objItem
+              ))
+          });
+
         const objStateEmpty = {
                                   items:        [],
                                   total_added:  0
@@ -126,6 +139,13 @@ class ListWidget extends React.Component {
                         <ListItem key={ objItem.id }
                                   caption={ objItem.caption }
                                   isChecked={ objItem.is_checked }
+                                  onChangeChecked={ () => {
+                                      this.setState(
+                                          this._mutateStateToUpdateItemChecked(
+                                              this.state,
+                                              objItem.id,
+                                              !objItem.is_checked));
+                                    }}
                         />
                       )) }
                 </ul>