Merge pull request #129 from AurelioGomezRosales/patch-5

Update README.md

Author: brauliodiez

03 State/readme.md

@@ -1,23 +1,22 @@
 # 03 State
 
-In this sample we will introduce a basic React concept, handling State.
+In this example we introduce a basic React concept: handling State.
 
-In this scenario we will provide a default username but let the user update
-it.
+In this scenario we provide a default username and let the user update it.
 
-We will take as a starting point sample _02 Properties_:
+We take as a starting point the example _02 Properties_:
 
 ## Summary steps:
 
-- Create an _App_ component that will hold the state, this state will contain the current
-username (by default assigned to "defaultUserName" value).
-This _App_ component will render the _Hello_ component. At first we will create a simple stateless
+- Create an _App_ component that holds the state. This state will contain the current
+username (with default value "defaultUserName").
+This _App_ component renders the _Hello_ component. At first we create a simple stateless
 _App_ component.
 - Update _main.tsx_ file to include our _App_ component.
-- Change _App_ component to a statful class component to hold the _userName_ state.
-- Create a _NameEdit_ component to let the user change the username. This will change the _App_ state
+- Change _App_ component to a stateful class component to hold the _userName_ state.
+- Create a _NameEdit_ component to let the user change the value of username. This changes the _App_ state
 using a function from _App_.
-- Check everything is working properly.
+- Check everything works properly.
 
 ## Prerequisites
 
@@ -44,7 +43,7 @@ export const App = () => {
 }
 ```
 
-- Let's update _main.tsx_ just to use the _App_ component that we have recently created.
+- Let's update _main.tsx_ just to use the _App_ component that we have just created.
 
 _./src/main.tsx_
 
@@ -60,15 +59,13 @@ _./src/main.tsx_
   );
 ```
 
-- Now we can check that things are still working as expected (nothing broken so far).
+- Now we can check that things are still working as expected.
 
   ```
   npm start
   ```
 
-- It's time to revisit _app.tsx_, since we want to store the name of the user and let the
-user updated it, let's move this component to a class stateful component and define
-a state, including _userName_ and pass this value to the _Hello_ component.
+- It's time to revisit _app.tsx_. We want to store the user's name and let the user updated it. Let's move this component to a class stateful component and define a state including _userName_, and pass this value to the _Hello_ component.
 
 _./src/app.tsx_
 
@@ -98,15 +95,13 @@ export class App extends React.Component<Props, State> {
 }
 ```
 
-- Again, we can do a quick check to test that everything is working as expected.
+- Again, we can do a quick check to test that everything works as expected.
 
   ```
   npm start
   ```
 
-- Now it's time to create an _NameEdit_ component, this component will let the user
-update his username and will notify with a callback to the parent control whenever
-the _userName_ gets updated.
+- Now it's time to create an _NameEdit_ component. This component lets the user update his username and notifies with a callback to the parent control whenever the value of _userName_ gets updated.
 
 _./src/nameEdit.tsx_
 
@@ -118,20 +113,26 @@ interface Props {
   onChange : (event) => void;
 }
 
-export const NameEditComponent = (props : Props) => {
-  return (
+export const NameEditComponent = (props : Props) => 
     <>
       <label>Update name:</label>
       <input value={props.userName} onChange={props.onChange}/>
     <>
-  );
-}
 ```
-> What is this Fragment or <> stuff? A way to create component that have multiple root elements (not a single parent)
 
+Side note: What is this Fragment or <> stuff? A way to create component that has multiple root elements (not a single parent). Available from React 16.2. As an alternative you can type:
 
+```jsx
+  ...
+  export const NameEditComponent = (props : Props) => 
+    <React.Fragment>
+      <label>Update name:</label>
+      <input value={props.userName} onChange={props.onChange}/>
+    </React.Fragment>
+}
+```
 
-- In the _app.tsx_ file let's add a function to set the changed _userName_ in the state.
+- In the _app.tsx_ file, let's add a function to replace the state value of _userName_ with the new one.
 
 ```diff
   import * as React from 'react';
@@ -167,9 +168,21 @@ export const NameEditComponent = (props : Props) => {
   }
 ```
 
-> Note down the fat arrow class method, this will avoid loosing the _this_ context on the callback
+Side note: mind the use of the fat arrow function. This avoids losing the context for _this_ in the callback.
+
+Side note 2: this.setState() will change the value of the state at some point in the future. Do not consider it is a synchronous change - it isn't. Writing logic that depends on the username new value being in the state right after calling this.setState() is wrong and might fail. If you need to write code dependent on the new value being in the state, use a callback as second parameter of this.setState(). See this example
+
+```
+  setUserNameState = (newName: string) => {
+    this.setState({userName: newName}, this.nameChanged);
+  }
+  
+  nameChanged() {
+    /* logic here gets invoked after the new name value in the state is set. */
+  }
+```
 
-- Finally let's test the final sample.
+- Finally let's test everything works once more.
 
   ```
   npm start