react,js calculator not concatenating numbers - reactjs

Question

import React, { useState } from 'react';
const Calculator = () => {
const [displayValue, setDisplayValue] = useState('0');
const [operations, setOperations] = useState([]);
const handleClick = (e) => {
const value = e.target.getAttribute('data-value');
if (value === 'C') {
setDisplayValue('0');
setOperations([]);
} else if (value === 'CE') {
setDisplayValue('0');
setOperations(operations.slice(0, -1));
} else if (value === '=') {
const result = eval(operations.join(''));
setDisplayValue(result);
setOperations([]);
} else if (!isNaN(value)) {
// Handle number buttons
setDisplayValue(displayValue === '0' ? value : displayValue + value);
} else {
// Handle operation buttons
if (displayValue !== '') {
setOperations([...operations, displayValue, value]);
setDisplayValue('');
}
}
};
const renderButtons = () => {
const buttons = [
['7', '8', '9', '+'],
['4', '5', '6', '-'],
['1', '2', '3', '/'],
['.', '0', 'C', '=']
];
return buttons.map((row) => {
return (
<div className="button-row">
{row.map((button) => {
return (
<button
key={button}
data-value={button}
onClick={handleClick}
>
{button}
</button>
);
})}
</div>
);
});
};
return (
<div className="calculator">
<div className="display">{displayValue}</div>
{renderButtons()}
</div>
);
};
export default Calculator;
This is my code for a simple calculator using react.js
The problem is when I digit a number, for exemple "40", the display only shows 4, and than 0, never 4 and 0 together, although the final result after= is correct.
40+50=90.
But when I digit it only shows 4, than 0, than 5, than 0. One at the time.
How to fix it?
I tried several ways to fix it without good results.

Answer 1

You were not adding the last number that was displaying before clicking the = sign. I've added some conditions to add the last display value
import React, { useState } from "react";
const Calculator = () => {
const [displayValue, setDisplayValue] = useState("0");
const [operations, setOperations] = useState([]);
const handleClick = (e) => {
e.preventDefault();
const value = e.target.getAttribute("data-value");
if (value === "C") {
setDisplayValue("0");
setOperations([]);
} else if (value === "=") {
console.log(operations);
if (operations.length === 0) {
setDisplayValue("0");
} else {
const result = eval(operations.join("") + displayValue);
setDisplayValue(result);
setOperations([]);
}
} else if (!isNaN(value)) {
// Handle number buttons
console.log("num", value);
setDisplayValue(displayValue === "0" ? value : displayValue + value);
} else {
// Handle operation buttons
if (displayValue !== "") {
setOperations([...operations, displayValue, value]);
setDisplayValue("");
}
}
};
console.log("num", displayValue);
console.log("op array", operations);
const renderButtons = () => {
const buttons = [
["7", "8", "9", "+"],
["4", "5", "6", "-"],
["1", "2", "3", "/"],
[".", "0", "C", "="]
];
return buttons.map((row) => {
return (
<div className="button-row">
{row.map((button, index) => {
return (
<button key={index} data-value={button} onClick={handleClick}>
{button}
</button>
);
})}
</div>
);
});
};
return (
<div className="calculator">
<div className="display">{displayValue}</div>
{renderButtons()}
</div>
);
};
export default Calculator;
also I've removed the CE operation as it was serving no purpose