refactor: convert simple-counter.js to use React hooks instead of classes

kaylakremer · kaylakremer · commit 120fade962bb · 2021-10-24T03:03:42.000-04:00
diff --git a/solutions/simple-counter.js b/solutions/simple-counter.js
@@ -1,27 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
-class Counter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {count: 0};
-  }
+const Counter = () => {
+  const [count, setCount] = useState(0);
 
   increment = () => {
-    const {count} = this.state;
-    this.setState({count: count + 1});
-  }
+    setCount(prevCount => prevCount + 1);
+  };
 
-  render() {
-    const {count} = this.state;
-    return (
-      <div id="mainArea">
-        <p>button count: <span>{count}</span></p>
-        <button onClick={this.increment} id="mainButton">Increase</button>
-      </div>
-    );
-  }
-}
+  return (
+    <div id="mainArea">
+      <p>
+        Button Count: 
+        <span>{count}</span>
+      </p>
+      <button 
+        onClick={increment} 
+        id="mainButton"
+      >
+        Increase
+      </button>
+    </div>
+  );
+};
 
 ReactDOM.render(
   <Counter />,
