Estoy realizando una calculadora con reactjs y todo esta bien, mi único problema es que quiero que el resultado cuando tenga parte decimal mande solo dos decimales al input, eso lo consigo hacer con toFixed(2)
solo que cuando el resultado es un numero entero manda los dos decimales también 20.00
.
¿Cómo hago para que solo mande los decimales cuando el numero no sea entero?
Aquí adjunto evento del resultado
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
const Calculator = () => {
return (
<div className="container">
<Buttons />
</div>
);
};
class Buttons extends React.Component {
constructor() {
super();
this.state = {
currentValue: '0',
};
this.handleAddDecimals = this.handleAddDecimals.bind(this);
this.handleEvaluate = this.handleEvaluate.bind(this);
this.handleClear = this.handleClear.bind(this);
}
handleClick = value => {
const { currentValue } = this.state;
this.setState({
currentValue: currentValue === '0' ? String(value) : currentValue + value,
});
};
handleAddDecimals = () => {
const { currentValue } = this.state;
if (currentValue.indexOf('.') === -1) {
this.setState({
currentValue: currentValue + '.',
});
}
};
handleEvaluate = () => {
const { currentValue } = this.state;
this.setState({
currentValue: eval(currentValue),
});
};
// handleEvaluate = () => {
// const { currentValue } = this.state;
// let fixedNum =
// currentValue % 1 === 0
// ? parseFloat(currentValue).toFixed(0)
// : parseFloat(currentValue).toFixed(2);
// this.setState({
// currentValue: eval(fixedNum),
// });
// };
handleClear = () => {
this.setState({
currentValue: '0',
});
};
render() {
const { currentValue } = this.state;
return (
<div>
<input id="display" value={currentValue} />
<div className="button-div">
<button id="zero" onClick={() => this.handleClick(0)}>
0
</button>
<button id="one" onClick={() => this.handleClick(1)}>
1
</button>
<button id="two" onClick={() => this.handleClick(2)}>
2
</button>
<button id="three" onClick={() => this.handleClick(3)}>
3
</button>
<button id="four" onClick={() => this.handleClick(4)}>
4
</button>
<button id="five" onClick={() => this.handleClick(5)}>
5
</button>
<button id="six" onClick={() => this.handleClick(6)}>
6
</button>
<button id="seven" onClick={() => this.handleClick(7)}>
7
</button>
<button id="eight" onClick={() => this.handleClick(8)}>
8
</button>
<button id="nine" onClick={() => this.handleClick(9)}>
9
</button>
<button id="add" onClick={() => this.handleClick('+')}>
+
</button>
<button id="subtract" onClick={() => this.handleClick('-')}>
-
</button>
<button id="multiply" onClick={() => this.handleClick('*')}>
*
</button>
<button id="divide" onClick={() => this.handleClick('/')}>
/
</button>
<button id="decimal" onClick={this.handleAddDecimals}>
.
</button>
<button id="equals" onClick={this.handleEvaluate}>
=
</button>
<button id="clear" onClick={this.handleClear}>
C
</button>
</div>
</div>
);
}
}
ReactDOM.render(<Calculator />, document.getElementById('root'));
handleEvaluate = () => { const { currentValue } = this.state; this.setState({ currentValue: eval(currentValue), }); };
cuando el resultado retorna un entero colocandole el toFixed(2) a la función eval me retorna los .00 y al sustituirla con el codigo que esta comentado deja de funcionar