Fine tunning 03

03 State/readme.md

@@ -108,18 +108,23 @@ export class App extends React.Component<Props, State> {
 update his username and will notify with a callback to the parent control whenever
 the _userName_ gets updated.
 
-  ```jsx
-  import * as React from 'react';
+```jsx
+import * as React from 'react';
 
-  export const NameEditComponent = (props : { userName : string, onChange : (event : any) => any }) => {
-    return (
-      <div>
-        <label>Update Name:</label>
-        <input value={props.userName} onChange={props.onChange} />
-      </div>
-    );
-  }
-  ```
+interface Props { 
+  userName: string, 
+  onChange: (event: any) => any 
+}
+
+export const NameEditComponent = (props: Props) => {
+  return (
+    <div>
+      <label>Update Name:</label>
+      <input value={props.userName} onChange={props.onChange} />
+    </div>
+  );
+}
+```
 
 - In the _app.tsx_ file let's add a function to set the changed _userName_ in the state.
 
@@ -142,15 +147,15 @@ the _userName_ gets updated.
       this.state = {userName: 'defaultUserName'};
     }
 
-+    setUsernameState(event) {     
++    setUsernameState = (event) => {
 +      this.setState({userName: event.target.value});
 +    }
 
     public render() {
       return (
 +        <div>
           <HelloComponent userName={this.state.userName} />
-+          <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState.bind(this)} />
++          <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState} />
 +        </div>
       );
     }

03 State/src/app.tsx

@@ -2,18 +2,21 @@ import * as React from 'react';
 import {HelloComponent} from './hello';
 import {NameEditComponent} from './nameEdit';
 
+interface Props {
+}
+
 interface State {
   userName : string;
 }
 
-export class App extends React.Component<{}, State> {
+export class App extends React.Component<Props, State> {
   constructor(props) {
     super(props);
 
     this.state = {userName: 'defaultUserName'};
   }
 
-  setUsernameState(event) {
+  setUsernameState = (event) => {
     // If the state gets more complex we should use object.assign
     this.setState({userName: event.target.value});
   }
@@ -22,7 +25,7 @@ export class App extends React.Component<{}, State> {
     return (
       <div>
         <HelloComponent userName={this.state.userName} />
-        <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState.bind(this)} />
+        <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState} />
       </div>
     );
   }

03 State/src/hello.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 
-export const HelloComponent = (props : {userName : string}) => {
+interface Props {
+  userName: string
+}
+
+export const HelloComponent = (props: Props) => {
   return (
     <h2>Hello user: {props.userName} !</h2>
   );

03 State/src/nameEdit.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-export const NameEditComponent = (props : { userName : string, onChange : (event : any) => any }) => {
+interface Props { 
+  userName: string, 
+  onChange: (event: any) => any 
+}
+
+export const NameEditComponent = (props: Props) => {
   return (
     <div>
       <label>Update Name:</label>