Olá, estou tentando criar uma calculadora usando React, porém, quando aperto no botão de um número que já havia sido enviado anteriormente ele não é passado.
Exemplo: Desejo apresentar no display o numero 77, porém, o numero 7 é enviado apenas uma vez
App.jsx
import React, { useState } from "react";
import Display from "./components/display/Display";
import Buttons from "./components/buttons/Buttons";
import './app.css'
export default App =>{
let [btnValue, setBtnValue] = useState('')
let sendBtnValue = e =>{
setBtnValue(e.target.value)
}
return(
<main className="mainStyle">
<h1>calculadora</h1>
<div className="calculatorBody">
<Display btnValue={btnValue} />
<div className="keyboardBody">
<Buttons click={sendBtnValue} size={3} >AC</Buttons>
<Buttons click={sendBtnValue} color={'#EB8545'} >/</Buttons>
<Buttons click={sendBtnValue}>7</Buttons>
<Buttons click={sendBtnValue}>8</Buttons>
<Buttons click={sendBtnValue}>9</Buttons>
<Buttons click={sendBtnValue} color={'#EB8545'}>*</Buttons>
<Buttons click={sendBtnValue}>4</Buttons>
<Buttons click={sendBtnValue}>5</Buttons>
<Buttons click={sendBtnValue}>6</Buttons>
<Buttons click={sendBtnValue} color={'#EB8545'}>-</Buttons>
<Buttons click={sendBtnValue}>1</Buttons>
<Buttons click={sendBtnValue}>2</Buttons>
<Buttons click={sendBtnValue}>3</Buttons>
<Buttons click={sendBtnValue} color={'#EB8545'}>+</Buttons>
<Buttons click={sendBtnValue} size={2}>0</Buttons>
<Buttons click={sendBtnValue}>.</Buttons>
<Buttons click={sendBtnValue} color={'#EB8545'}>=</Buttons>
</div>
</div>
</main>
)
}
Button.jsx
import React from "react";
import './button.css'
export default props =>{
const btnStyles = {
background: props.color || '#F1EFF1',
width: props.size ? (props.size * 25)+'%' : '25%',
color: props.color ? '#fff' : '#000'
}
return(
<>
<button onClick={props.click} style={btnStyles} value={props.children}>
{props.children}
</button>
</>
)
}
Display.jsx
import React, { useState } from "react"
import './display.css'
let count = ''
export default props =>{
let btnValue = props.btnValue
switch(btnValue){
case 'AC':
count = ''
break
case '=':
count = eval(count)
break
default:
count = count + btnValue
}
return(
<>
<input className="display" type='text' value={count || 0} readOnly/>
</>
)
}