Added logic to wire-up the 'Add new item...' button to prompt the use…

…r for the new item when clicked, and to update the <ListWidget> 'state' field 'items' to a new array of items including the just-added item, to cause it to be re-rendered by React with that new item.
maratbn · Aug 5, 2018 · 74cf9b3 · 74cf9b3
1 parent 83e7ace
commit 74cf9b3
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/webpack_in/entry.jsx b/webpack_in/entry.jsx
@@ -98,7 +98,23 @@ class ListWidget extends React.Component {
                 </ul>
               </div>
               <div>
-                <ButtonWidget caption="Add new item..." />
+                <ButtonWidget caption="Add new item..."
+                              onClick={() => {
+                                  const strItemNew = prompt("Please enter new item to add:",
+                                                            "Item "
+                                                                + (this.state.items.length + 1));
+                                  if (strItemNew === null) {
+                                      return;
+                                  }
+
+                                  this.setState({
+                                      ...this.state,
+                                      items: [
+                                          ...this.state.items,
+                                          strItemNew
+                                        ]
+                                    });
+                                }}/>
                 <ButtonWidget caption="Edit item..." />
                 <ButtonWidget caption="Remove item..." />
               </div>