Update README.md

06 MoveBackToStateless/readme.md

@@ -2,13 +2,13 @@
 
 In example 05 we learned how to remove state from a child control just to have clear governance of state.
 
-It's time to make some cleanup, let's simplify _[nameEdit.tsx](./src/nameEdit.tsx)_ component and move it as a stateless component.
+It's time to make some cleanup, let's simplify _[nameEdit.tsx](./src/nameEdit.tsx)_ component and modify it to a stateless component.
 
-We will take a startup point sample _[05 Refactor](./../05%20Refactor)_.
+We take _[05 Refactor](./../05%20Refactor)_ as reference.
 
 Summary steps:
 
-- Update _[nameEdit.tsx](./src/nameEdit.tsx)_, port it to stateless component and add the methods inline.
+- Update _[nameEdit.tsx](./src/nameEdit.tsx)_ and modify it to a stateless component.
 
 ## Prerequisites
 
@@ -20,7 +20,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are
 
 - Copy the content from _[05 Refactor](./../05%20Refactor)_ and execute `npm install`.
 
-- Update _[nameEdit.tsx](./src/nameEdit.tsx)_, port it to stateless component and add the methods inline. It should look like:
+- Update _[nameEdit.tsx](./src/nameEdit.tsx)_ and modify it to stateless component. It should look like this:
 
  ```jsx
 import * as React from 'react';
@@ -44,8 +44,24 @@ export const NameEditComponent = (props : Props) =>
   </div>
  ```
 
-- Now we can run the sample and we will get same results
+Side note: during the refactory we have changed ```this.props``` to ```props```. This is a required step as ```NameEditComponent``` is no longer a class but a function. During runtime, ```this``` is now undefined, so obviously then ```this.props``` fails.
+
+Side note 2: applying currying and Fragments, the code for ```NameEditComponent``` looks like this:
+
+```
+const onChange = (props: Props) => (event) => {
+  props.onEditingNameUpdated(event.target.value)
+}
+
+export const NameEditComponent = (props : Props) =>
+  <>
+      <label>Update Name:</label>
+      <input value={props.editingUserName} onChange={onChange(props)} />
+      <button className="btn btn-default" onClick={props.onNameUpdateRequest}>Change</button>
+  </>
+ ```
+- Now we can run the example and we get the same results
 
 ```bash
 npm start
-```
+```

07 Enable/readme.md

@@ -1,13 +1,12 @@
 # 07 Enable
 
-Let's continue with the update name sample, this time we want to disable the
-"update" button when the input is empty or when the value hasn't changed.
+Let's continue with the update name example, this time we want to disable the "Change" button when the input is empty or when the value hasn't changed.
 
-We will take a startup point sample _[06 MoveBackToStateless/](./../06%20MoveBackToStateless/)_.
+We take _[06 MoveBackToStateless/](./../06%20MoveBackToStateless/)_ as reference.
 
 Summary steps:
 
-- Add a condition to disable
+- Add a condition to disable the button.
 
 ## Prerequisites
 
@@ -19,7 +18,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are
 
 - Copy the content from _[06 MoveBackToStateless/](./../06%20MoveBackToStateless/)_.
 
-- Let's start by adding a condition to disable the field whenever is empty. Replace only the input tag in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ with the following code:
+- Let's start by adding a condition to disable the button whenever the input field is empty. Replace only the input tag in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ with the following code:
 
 _[./src/nameEdit.tsx](./src/nameEdit.tsx)_
 ```diff
@@ -32,13 +31,12 @@ _[./src/nameEdit.tsx](./src/nameEdit.tsx)_
 +        <button 
 +          className="btn btn-default" 
 +          onClick={props.onNameUpdateRequest}
-+          disabled={props.editingUserName === ''}
++          disabled={!props.editingUserName}
 +        >Change</button>
     </div>
 ```
 
-- Now comes the tricky part, detect when the name hasn't changed.<br />
-First we will add a new property called _userName_ with type `string` in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_. This one will hold the last accepted userName.
+- Now comes the tricky part: to detect when ```userName``` has changed. First we add a new property called ```userName``` with type `string` in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_. This one holds the last accepted value for ```userName```.
 
 _[./src/nameEdit.tsx](./src/nameEdit.tsx)_
 ```diff
@@ -50,7 +48,7 @@ _[./src/nameEdit.tsx](./src/nameEdit.tsx)_
  }
  ```
 
-- We will add to the enable condition one more test, checking if name has changed.
+- We add to disabled an additional condition an to check if the value of ```editingUserName``` name has changed.
 Replace again only the input tag in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ with the following code:
 
 _[./src/nameEdit.tsx](./src/nameEdit.tsx)_
@@ -59,11 +57,11 @@ _[./src/nameEdit.tsx](./src/nameEdit.tsx)_
       className="btn btn-default" 
       onClick={props.onNameUpdateRequest}
 -      disabled={props.editingUserName === ''}
-+      disabled={props.editingUserName === '' || props.userName === props.editingUserName}
++      disabled={!props.editingUserName || props.userName === props.editingUserName}
       >Change</button>
 ```
 
-- Now we have to feed this property from the parent control (Add `userName={this.state.userName}` to the NameEditComponent in _[./src/app.tsx](./src/app.tsx)_). The `NameEditComponent` should be like:
+- Now we have to feed this property from the parent control. Add `userName={this.state.userName}` to the NameEditComponent in _[./src/app.tsx](./src/app.tsx)_. The `NameEditComponent` should be like:
 
 _[./src/app.tsx](./src/app.tsx)_
 ```diff
@@ -87,9 +85,9 @@ _[./src/app.tsx](./src/app.tsx)_
 npm start
 ```
 
-> As an excercise, what if we want to do this more generic? we could have a generic property called enable that could be true or false.
+> As an excercise, how can we get this in a more generic way? We could have a generic property called disable that could be true or false.
 
-To do this, we will modify [./src/app.tsx](./src/app.tsx) adding the variable `disable` to the `<NameEditComponent>` component. This variable is **Boolean**, so you need conditions to evaluate it.
+To do this, we modify [./src/app.tsx](./src/app.tsx) adding the variable `disable` to the `<NameEditComponent>` component. This variable is **Boolean**, so you need conditions to evaluate it.
 
 _[./src/app.tsx](./src/app.tsx)_
 ```diff
@@ -129,8 +127,8 @@ export const NameEditComponent = (props : Props) =>
       <button 
           className="btn btn-default" 
           onClick={props.onNameUpdateRequest}
---        disabled={props.editingUserName === '' || props.userName === props.editingUserName}
+--        disabled={!props.editingUserName || props.userName === props.editingUserName}
 ++        disabled={props.disable}
         >Change</button>
   </div>
-```
+```