props drilled

src/Components/Calculator.js

@@ -22,7 +22,7 @@ export default function Calculator(props){
    
         if(typeof content === "number" ){
             setMain(prev=>{return prev.toString()+content.toString()})
-        }else if(content == "."){
+        }else if(content === "."){
             //HANDLE DECIMAL WITH REGEX
         }else if(operations[content]){ 
             setMemory(prev=>{operations[content](prev,main)})

src/Components/NumPad.js

@@ -1,28 +1,32 @@
 import Button from "./Button"
 export default function NumPad(props){
     const map = {
-        zero:{number:0,callback:""},
+        zero:0,
-        one:{number:1,callback:""},
+        one:1,
-        two:{number:2,callback:""},
+        two:2,
-        three:{number:3,callback:""},
+        three:3,
-        four:{number:4,callback:""},
+        four:4,
-        five:{number:5,callback:""},
+        five:5,
-        six:{number:6,callback:""},
+        six:6,
-        seven:{number:7,callback:""},
+        seven:7,
-        eight:{number:8,callback:""},
+        eight:8,
-        nine:{number:9,callback:""}
+        nine:9
     }
     const numPad = Object.keys(map).map((e,i)=>{
         return(
-            <Button id={e} number={map[e].number} key={"numPad"+e} callback={map[e]}>
+            <Button 
+                id={e} 
+                content={map[e]} 
+                key={"numPad"+e} 
+                handleInput={props.handleInput}>
                 {i}
             </Button>
         )
     })
 
     return(
-        <>
+        <div className="numPad">
         {numPad}
-        </>
+        </div>
     )
 }

src/Components/Operators.js

@@ -1,19 +1,23 @@
 import Button from "./Button";
 export default function Operators(props){
     const map = {
-        add:{symbol:"+",callback:""},
+        add:"+",
-        subtract:{symbol:"-",callback:""},
+        subtract:"-",
-        multiply:{symbol:"x",callback:""},
+        multiply:"x",
-        divide:{symbol:"/",callback:""},
+        divide:"/",
-        decimal:{symbol:".",callback:""}
+        decimal:"."
     }
 
     const operators = Object.keys(map).map(e=>{
-        return <Button  id={e} callback={map[e].callback} key={e}>
+        return <Button  
-                    {map[e].symbol}
+                id={e} 
+                content={map[e]}
+                handleInput={props.handleInput} 
+                key={e}>
+                    {map[e]}
                 </Button>
     })
 
-    return ( <>{operators}</>)
+    return ( <div className="operations-pad">{operators}</div>)
     
 }