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

Author: kaylakremer

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 />,