ref: #187 adding types

Author: lokeeto

hooks/02_Properties/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => (
-    <h2>Hello user: {props.userName} !</h2>
-);
+export const HelloComponent: React.FC<Props> = (props) => (
+  <h2>Hello user: {props.userName} !</h2>
+);

hooks/03_State/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => {
+export const HelloComponent: React.FC<Props> = (props) => {
   return <h2>Hello user: {props.userName} !</h2>;
 };

hooks/03_State/src/nameEdit.tsx

@@ -5,7 +5,7 @@ interface Props {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const NameEditComponent = (props: Props) => (
+export const NameEditComponent: React.FC<Props> = (props) => (
   <>
     <label>Update name:</label>
     <input value={props.userName} onChange={props.onChange} />

hooks/04_Callback/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => {
+export const HelloComponent: React.FC<Props> = (props) => {
   return <h2>Hello user: {props.userName} !</h2>;
 };

hooks/04_Callback/src/nameEdit.tsx

@@ -5,7 +5,7 @@ interface Props {
   onNameUpdated: (newName: string) => any;
 }
 
-export const NameEditComponent = (props: Props) => {
+export const NameEditComponent: React.FC<Props> = (props) => {
   const [editingName, setEditingName] = React.useState(props.initialUserName);
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {

hooks/05_Refactor/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => {
+export const HelloComponent: React.FC<Props> = (props) => {
   return <h2>Hello user: {props.userName} !</h2>;
 };

hooks/05_Refactor/src/nameEdit.tsx

@@ -7,7 +7,7 @@ interface Props {
   onEditingNameUpdated: (newEditingName: string) => any;
 }
 
-export const NameEditComponent = (props: Props) => {
+export const NameEditComponent: React.FC<Props> = (props) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     props.onEditingNameUpdated(e.target.value);
   };

hooks/06_Enable/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => {
+export const HelloComponent: React.FC<Props> = (props) => {
   return <h2>Hello user: {props.userName} !</h2>;
 };

hooks/06_Enable/src/nameEdit.tsx

@@ -5,10 +5,10 @@ interface Props {
   editingName: string;
   onNameUpdated: () => any;
   onEditingNameUpdated: (newEditingName: string) => any;
-  disabled : boolean;
+  disabled: boolean;
 }
 
-export const NameEditComponent = (props: Props) => {
+export const NameEditComponent: React.FC<Props> = (props) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     props.onEditingNameUpdated(e.target.value);
   };
@@ -21,10 +21,9 @@ export const NameEditComponent = (props: Props) => {
     <>
       <label>Update name:</label>
       <input value={props.editingName} onChange={onChange} />
-      <button 
-        onClick={onNameSubmit}
-        disabled={props.disabled}
-      >Change</button>
+      <button onClick={onNameSubmit} disabled={props.disabled}>
+        Change
+      </button>
     </>
   );
 };

hooks/07_ColorPicker/src/components/colorBrowser.tsx

@@ -5,13 +5,11 @@ interface Props {
   color: Color;
 }
 
-export const ColorBrowser = (props: Props) => {
+export const ColorBrowser: React.FC<Props> = (props) => {
   const divStyle: React.CSSProperties = {
     width: "11rem",
     height: "7rem",
-    backgroundColor: `rgb(${props.color.red},${props.color.green}, ${
-      props.color.blue
-    })`
+    backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`,
   };
 
   return <div style={divStyle} />;