[feat] Convert to function component

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import "./App.css";
 import { Button } from "./components/Button";
 import { Button1 } from "./components/Button1";
@@ -8,61 +8,107 @@ import { Input } from "./components/Input";
 import { ClearButton } from "./components/ClearButton";
 import * as math from "mathjs";
 
-class App extends Component {
+// class App extends Component {
-  constructor(props) {
+//   constructor(props) {
-    super(props);
+//     super(props);
 
-    this.state = {
+//     this.state = {
-      input: ""
+//       input: ""
-    };
+//     };
-  }
+//   }
 
-  addToInput = val => {
+//   addToInput = val => {
-    this.setState({ input: this.state.input + val });
+//     this.setState({ input: this.state.input + val });
-  };
+//   };
 
-  handleEqual = () => {
+//   handleEqual = () => {
-    this.setState({ input: math.evaluate(this.state.input) });
+//     this.setState({ input: math.evaluate(this.state.input) });
-  };
+//   };
 
-  render() {
+//   render() {
-    return (
+//     return (
-      <div className="app">
+//       <div className="app">
-        <div className="calc-wrapper">
+//         <div className="calc-wrapper">
-          <Input input={this.state.input} />
+//           <Input input={this.state.input} />
-          <div className="row">
+//           <div className="row">
-            <ClearButton handleClear={() => this.setState({ input: "" })}>AC</ClearButton>
+//             <ClearButton handleClear={() => this.setState({ input: "" })}>AC</ClearButton>
-            <Button handleClick={this.addToInput}>+/-</Button>
+//             <Button handleClick={this.addToInput}>+/-</Button>
-            <Button handleClick={this.addToInput}>%</Button>
+//             <Button handleClick={this.addToInput}>%</Button>
-            <Button handleClick={this.addToInput}>/</Button>
+//             <Button handleClick={this.addToInput}>/</Button>
-          </div>
+//           </div>
-          <div className="row">
+//           <div className="row">
-            <Button handleClick={this.addToInput}>7</Button>
+//             <Button handleClick={this.addToInput}>7</Button>
-            <Button handleClick={this.addToInput}>8</Button>
+//             <Button handleClick={this.addToInput}>8</Button>
-            <Button handleClick={this.addToInput}>9</Button>
+//             <Button handleClick={this.addToInput}>9</Button>
-            <Button handleClick={this.addToInput}>*</Button>
+//             <Button handleClick={this.addToInput}>*</Button>
-          </div>
+//           </div>
-          <div className="row">
+//           <div className="row">
-            <Button handleClick={this.addToInput}>4</Button>
+//             <Button handleClick={this.addToInput}>4</Button>
-            <Button handleClick={this.addToInput}>5</Button>
+//             <Button handleClick={this.addToInput}>5</Button>
-            <Button handleClick={this.addToInput}>6</Button>
+//             <Button handleClick={this.addToInput}>6</Button>
-            <Button handleClick={this.addToInput}>-</Button>
+//             <Button handleClick={this.addToInput}>-</Button>
-          </div>
+//           </div>
-          <div className="row">
+//           <div className="row">
-            <Button handleClick={this.addToInput}>1</Button>
+//             <Button handleClick={this.addToInput}>1</Button>
-            <Button handleClick={this.addToInput}>2</Button>
+//             <Button handleClick={this.addToInput}>2</Button>
-            <Button handleClick={this.addToInput}>3</Button>
+//             <Button handleClick={this.addToInput}>3</Button>
-            <Button handleClick={this.addToInput}>+</Button>
+//             <Button handleClick={this.addToInput}>+</Button>
-          </div>
+//           </div>
-          <div className="row">
+//           <div className="row">
-            <Button1  handleClick={this.addToInput}>0</Button1>
+//             <Button1  handleClick={this.addToInput}>0</Button1>
-            <Button2  handleClick={this.addToInput}>.</Button2>
+//             <Button2  handleClick={this.addToInput}>.</Button2>
-            <Button3  handleClick={() => this.handleEqual()}>=</Button3>
+//             <Button3  handleClick={() => this.handleEqual()}>=</Button3>
-          </div>
+//           </div>
-        </div>
+//         </div>
-      </div>
+//       </div>
-    );
+//     );
-  }
+//   }
+// }
+
+function App() {
+	const [input, setInput] = useState("");
+
+	const addToInput = val => setInput(input + val);
+	const handleEqual = () => setInput(math.evaluate(input));
+
+	return (
+		<div className="app">
+			<div className="calc-wrapper">
+				<Input input={input} />
+				<div className="row">
+					<ClearButton handleClear={() => setInput("")}>
+						AC
+					</ClearButton>
+					<Button handleClick={addToInput}>+/-</Button>
+					<Button handleClick={addToInput}>%</Button>
+					<Button handleClick={addToInput}>/</Button>
+				</div>
+				<div className="row">
+					<Button handleClick={addToInput}>7</Button>
+					<Button handleClick={addToInput}>8</Button>
+					<Button handleClick={addToInput}>9</Button>
+					<Button handleClick={addToInput}>*</Button>
+				</div>
+				<div className="row">
+					<Button handleClick={addToInput}>4</Button>
+					<Button handleClick={addToInput}>5</Button>
+					<Button handleClick={addToInput}>6</Button>
+					<Button handleClick={addToInput}>-</Button>
+				</div>
+				<div className="row">
+					<Button handleClick={addToInput}>1</Button>
+					<Button handleClick={addToInput}>2</Button>
+					<Button handleClick={addToInput}>3</Button>
+					<Button handleClick={addToInput}>+</Button>
+				</div>
+				<div className="row">
+					<Button1 handleClick={addToInput}>0</Button1>
+					<Button2 handleClick={addToInput}>.</Button2>
+					<Button3 handleClick={handleEqual}>=</Button3>
+				</div>
+			</div>
+		</div>
+	);
 }
 
 export default App;