Add toggling edit state

reactjs/rsvp_app/src/App.js

@@ -8,32 +8,40 @@ class App extends Component {
     guests: [
       {
         name: "Treasure",
-        isConfirmed: false
+        isConfirmed: false,
+        isEditing: false
       },
       {
         name: "Nick",
-        isConfirmed: true
+        isConfirmed: true,
+        isEditing: false
       },
       {
         name: "Matt",
-        isConfirmed: true
+        isConfirmed: true,
+        isEditing: true
       }
     ]
   }
 
-  toggleConfirmationAt = indexToChange => 
+  toggleGuestPropertyAt = (property, indexToChange) => 
     this.setState({
       guests: this.state.guests.map((guest, index) => {
         if (index === indexToChange) {
           return {
             ...guest,
-            isConfirmed: !guest.isConfirmed
+            isConfirmed: !guest[property]
           };
         }
         return guest;
       })
     });
 
+  toggleConfirmationAt = index =>
+    this.toggleGuestPropertyAt("isConfirmed", index);
+
+  toggleEditingAt = index =>
+    this.toggleGuestPropertyAt("isEditing", index);
 
   getTotalInvited = () => this.state.guests.length;
   // getAttendingGuests = () =>
@@ -74,7 +82,11 @@ class App extends Component {
             </tbody>
           </table>
 
-          <GuestList guests={this.state.guests} />
+          <GuestList 
+            guests={this.state.guests} 
+            toggleConfirmationAt={this.toggleConfirmationAt}
+            toggleEditingAt={this.toggleEditingAt}
+          />
 
         </div>
       </div>

reactjs/rsvp_app/src/Guest.js

@@ -5,15 +5,21 @@ const Guest = props =>
     <li>
       <span>{props.name}</span>
       <label>
-        <input type="checkbox" checked={props.isConfirmed} /> Confirmed
+        <input 
+          type="checkbox" 
+          checked={props.isConfirmed}
+          onChange={props.handleConfirmation} /> Confirmed
       </label>
-      <button>edit</button>
+      <button onClick={props.handleToggleEditing}>edit</button>
       <button>remove</button>
     </li>
 
 Guest.propTypes = {
   name: PropTypes.string.isRequired,
-  isConfirmed: PropTypes.bool.isRequired
+  isConfirmed: PropTypes.bool.isRequired,
+  isEditing: PropTypes.bool.isRequired,
+  handleConfirmation: PropTypes.func.isRequired,
+  handleToggleEditing: PropTypes.func.isRequired
 }
 
 export default Guest

reactjs/rsvp_app/src/GuestList.js

@@ -6,12 +6,20 @@ import Guest from './Guest'
 const GuestList = props => 
   <ul>
     {props.guests.map((guest, index) =>
-      <Guest key={index} name={guest.name} isConfirmed={guest.isConfirmed} />
+      <Guest 
+        key={index} 
+        name={guest.name} 
+        isConfirmed={guest.isConfirmed}
+        isEditing={guest.isEditing}
+        handleConfirmation={() => props.toggleConfirmationAt(index)}
+        handleToggleEditing={() => props.toggleEditingAt(index)} />
     )} 
   </ul>;
 
 GuestList.propTypes = {
-  guests: PropTypes.array.isRequired
+  guests: PropTypes.array.isRequired,
+  toggleConfirmationAt: PropTypes.func.isRequired,
+  toggleEditingAt: PropTypes.func.isRequired
 }
 
 export default GuestList

reactjs/rsvp_app/yarn.lock

@@ -5114,7 +5114,7 @@ react-dev-utils@^4.2.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-[email protected]:
+react-dom@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
   dependencies:
@@ -5170,7 +5170,7 @@ [email protected]:
   optionalDependencies:
     fsevents "1.1.2"
 
-[email protected]:
+react@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
   dependencies: