React Calculator not working on multiple digits

React Calculator not working on multiple digits

Problem Description:

Hi Im new to Programming

I tried practicing programming by taking on a simple project: calculator

It works fine but the problem is when I press 3 after 3 it is just showing 3 not 33

how do i work on this ?

My app.js file:

import React, { useState , useEffect, useRef} from "react";
import { add, subtract, multiply, divide } from "../functions.js";
import "../styles.css";

function App() {
    const [num, setNum] = useState(0);
    const [symbol, setSymbol] = useState("");
    const symbols = ["+", "-", "*", "/"];
    const numbers = [];


    function setButton(event) {
        if (Number(prevCount) !== 0 && symbol == "") {
            const number = numbers.join("");
            setNum(number);
        } else {
            setNum(event.target.name);
            numbers.push(event.target.name);
        }
    }

    function usePrevious(value) {
        // The ref object is a generic container whose current property is mutable ...
        // ... and can hold any value, similar to an instance property on a class
        const ref = useRef();
        // Store current value in ref
        useEffect(() => {
            ref.current = value;
        }, [value]); // Only re-run if value changes
        // Return previous value (happens before update in useEffect above)
        return ref.current;
    }

    const prevCount = usePrevious(num);
    
    function EqualTo() {

        let number = 0;

        switch (symbol) {
            case "+":
                number = add(Number(prevCount), Number(num))
                break;
            case "-":
                number = subtract(Number(prevCount), Number(num));
                break;
            case "*":
                number = multiply(Number(prevCount), Number(num));
                break;
            case "/":
                number = divide(Number(prevCount), Number(num));
                break;
        }

        setNum(number);
        setSymbol("");
    }

    function ac() {
        setNum(0);
        setSymbol("");
        numbers = [];
    }

    function symbolF(event) {
        setSymbol(event.target.name)
       
        let number = 0;

        if (prevCount == 0) {
            return
        } else if (prevCount != 0) {
            switch (symbol) {
                case "+":
                    number = Number(num) + Number(prevCount);
                    setNum(number);
                    break;
                case "-":
                    number = Number(prevCount) - Number(num);
                    setNum(number);
                    break;
                case "*":
                    number = Number(prevCount) * Number(num);
                    setNum(number);
                    break;
                case "/":
                    number = Number(prevCount) / Number(num);
                    setNum(number);
            }
        } else if (prevCount !== 0 && !(symbol in symbols)) {
            const newNum = prevCount + num;
            setNum(newNum)
        }
    }

    function forInpute(event) {
        setNum(event.target.value);    
    }

    return (
        <div>
            <br />
            <input type="number" placeholder="Enter num" value={num} onChange={forInpute}></input>
            <br />
            <button onClick={setButton} name="1">1</button>
            <span><button name="2" onClick={setButton}>2</button></span>
            <span><button name="3" onClick={setButton}>3</button></span>
            <span><button name="+" onClick={symbolF}>+</button></span>
            <br />
            <button name="4" onClick={setButton}>4</button>
            <span><button name="5" onClick={setButton}>5</button></span>
            <span><button name="6" onClick={setButton}>6</button></span>
            <span><button name="-" onClick={symbolF}>-</button></span>
            <br />
            <button name="7" onClick={setButton}>7</button>
            <span><button name="8" onClick={setButton}>8</button></span>
            <span><button name="9" onClick={setButton}>9</button></span>
            <span><button name="*" onClick={symbolF}>*</button></span>
            <br />
            <span><button name="0" onClick={setButton}>0</button></span>
            <span><button name="." onClick={setButton}>.</button></span>
            <span><button name="/" onClick={symbolF}>/</button></span>
            <br />

            <button onClick={EqualTo}>=</button>
            <br />

            <button onClick={ac}>AC</button>
        </div>
    );
}

export default App;

function setButton(event) {
        if (Number(prevCount) !== 0 && symbol == "") {
            const number = numbers.join("");
            setNum(number);
        } else {
            setNum(event.target.name);
            numbers.push(event.target.name);
        }
    }

I tried implementing this but the condition also doesnt seem to work

I thought and the condition for another digit in the number is when the symbol is not equal to an arithmetic problem
So I even implemented that but it is not seem to work Pls Help ME!

Solution – 1

Take the input as string and do string concatenation.
It goes something like this

let text1 = "2";
let text2 = "3";
let result = text1.concat(text2);
result will be "23"

use parseInt before performing operations to convert the string to number.

let a = "100";
let b = parseInt(a);
result will be 100 (integer)

Use num.toString() to convert the output values to string.