useState hook

src/App.tsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
-import { Hello, Helloc } from "./ms-starter";
+import { Hello, Helloc, Helloh } from "./ms-starter";
 
 interface AppProp {
   title: string;
@@ -26,6 +26,7 @@ class App extends Component<AppProp> {
         </header>
         <Hello name="foo" enthusiasmLevel={3} />
         <Helloc name="bar" />
+        <Helloh name="hooks" />
       </div>
     );
   }

src/ms-starter/components/hello-h.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+import { HelloProps, getExclamationMarks } from "./hello";
+
+export function Helloh({ name }: HelloProps) {
+  const [{ enthusiasmLevel }, setState] = useState({
+    enthusiasmLevel: 1
+  });
+
+  function handleClick() {
+    setState(prevS => {
+      return {
+        enthusiasmLevel: prevS.enthusiasmLevel + 1
+      };
+    });
+  }
+  return (
+    <div className="hello" onClick={handleClick}>
+      <div className="greeting">
+        Hello {name + getExclamationMarks(enthusiasmLevel)}
+      </div>
+    </div>
+  );
+}

src/ms-starter/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./hello";
 export * from "./hello-c";
+export * from "./hello-h";