[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 => {
+//     this.setState({ input: this.state.input + val });
+//   };
+
+//   handleEqual = () => {
+//     this.setState({ input: math.evaluate(this.state.input) });
+//   };
 
-  addToInput = val => {
+//   render() {
-    this.setState({ input: this.state.input + val });
+//     return (
-  };
+//       <div className="app">
+//         <div className="calc-wrapper">
+//           <Input input={this.state.input} />
+//           <div className="row">
+//             <ClearButton handleClear={() => this.setState({ input: "" })}>AC</ClearButton>
+//             <Button handleClick={this.addToInput}>+/-</Button>
+//             <Button handleClick={this.addToInput}>%</Button>
+//             <Button handleClick={this.addToInput}>/</Button>
+//           </div>
+//           <div className="row">
+//             <Button handleClick={this.addToInput}>7</Button>
+//             <Button handleClick={this.addToInput}>8</Button>
+//             <Button handleClick={this.addToInput}>9</Button>
+//             <Button handleClick={this.addToInput}>*</Button>
+//           </div>
+//           <div className="row">
+//             <Button handleClick={this.addToInput}>4</Button>
+//             <Button handleClick={this.addToInput}>5</Button>
+//             <Button handleClick={this.addToInput}>6</Button>
+//             <Button handleClick={this.addToInput}>-</Button>
+//           </div>
+//           <div className="row">
+//             <Button handleClick={this.addToInput}>1</Button>
+//             <Button handleClick={this.addToInput}>2</Button>
+//             <Button handleClick={this.addToInput}>3</Button>
+//             <Button handleClick={this.addToInput}>+</Button>
+//           </div>
+//           <div className="row">
+//             <Button1  handleClick={this.addToInput}>0</Button1>
+//             <Button2  handleClick={this.addToInput}>.</Button2>
+//             <Button3  handleClick={() => this.handleEqual()}>=</Button3>
+//           </div>
+//         </div>
+//       </div>
+//     );
+//   }
+// }
 
-  handleEqual = () => {
+function App() {
-    this.setState({ input: math.evaluate(this.state.input) });
+	const [input, setInput] = useState("");
-  };
+
+	const addToInput = val => setInput(input + val);
+	const handleEqual = () => setInput(math.evaluate(input));
 
-  render() {
 	return (
 		<div className="app">
 			<div className="calc-wrapper">
-          <Input input={this.state.input} />
+				<Input input={input} />
 				<div className="row">
-            <ClearButton handleClear={() => this.setState({ input: "" })}>AC</ClearButton>
+					<ClearButton handleClear={() => setInput("")}>
-            <Button handleClick={this.addToInput}>+/-</Button>
+						AC
-            <Button handleClick={this.addToInput}>%</Button>
+					</ClearButton>
-            <Button handleClick={this.addToInput}>/</Button>
+					<Button handleClick={addToInput}>+/-</Button>
+					<Button handleClick={addToInput}>%</Button>
+					<Button handleClick={addToInput}>/</Button>
 				</div>
 				<div className="row">
-            <Button handleClick={this.addToInput}>7</Button>
+					<Button handleClick={addToInput}>7</Button>
-            <Button handleClick={this.addToInput}>8</Button>
+					<Button handleClick={addToInput}>8</Button>
-            <Button handleClick={this.addToInput}>9</Button>
+					<Button handleClick={addToInput}>9</Button>
-            <Button handleClick={this.addToInput}>*</Button>
+					<Button handleClick={addToInput}>*</Button>
 				</div>
 				<div className="row">
-            <Button handleClick={this.addToInput}>4</Button>
+					<Button handleClick={addToInput}>4</Button>
-            <Button handleClick={this.addToInput}>5</Button>
+					<Button handleClick={addToInput}>5</Button>
-            <Button handleClick={this.addToInput}>6</Button>
+					<Button handleClick={addToInput}>6</Button>
-            <Button handleClick={this.addToInput}>-</Button>
+					<Button handleClick={addToInput}>-</Button>
 				</div>
 				<div className="row">
-            <Button handleClick={this.addToInput}>1</Button>
+					<Button handleClick={addToInput}>1</Button>
-            <Button handleClick={this.addToInput}>2</Button>
+					<Button handleClick={addToInput}>2</Button>
-            <Button handleClick={this.addToInput}>3</Button>
+					<Button handleClick={addToInput}>3</Button>
-            <Button handleClick={this.addToInput}>+</Button>
+					<Button handleClick={addToInput}>+</Button>
 				</div>
 				<div className="row">
-            <Button1  handleClick={this.addToInput}>0</Button1>
+					<Button1 handleClick={addToInput}>0</Button1>
-            <Button2  handleClick={this.addToInput}>.</Button2>
+					<Button2 handleClick={addToInput}>.</Button2>
-            <Button3  handleClick={() => this.handleEqual()}>=</Button3>
+					<Button3 handleClick={handleEqual}>=</Button3>
 				</div>
 			</div>
 		</div>
 	);
 }
-}
 
 export default App;