As i have created a calculator and when i pass 5*-+5 value what want to remove *- from the variable so it can perform the only 5+5, but i was manage to remove *- but was unable to setResult state variable with new value that is 5+5.
you see that in line 34.
import './App.css'
import { useState, useEffect } from 'react'
function App() {
const [input, setInput] = useState('0')
const [result, setResult] = useState('0')
const [final, setFinal] = useState('')
const operator = ['/', '*', '-', '+']
const numberEle = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
const handleNumber = (e) => {
const number = e.target.textContent
const reset = () => {
setResult('0')
setInput('0')
setFinal('')
}
if (number === '=') {
let flag = true
if (flag) {
let str = result
for (let i = 0; i < str.length; ++i) {
if (operator.includes(str[i])) {
if (operator.includes(str[i])) {
str = str.slice(0, i) + str.slice(i + 1, str.length)
console.log(str)
}
}
}
console.log(str + 'sdad' + eval(str))
//problem here
setResult(str)
//flag = false
}
console.log(result)
const calculatedValue = eval(result)
setInput(result)
setFinal(calculatedValue)
setResult(calculatedValue)
return
}
if (result === '0') {
if (number !== 'AC') {
setResult(number)
setInput(number)
}
return
}
if (number === 'AC' && result) {
reset()
return
}
if (operator.includes(number)) {
setResult(result + '' + number + '')
setInput(number)
}
if (numberEle.includes(number)) {
let prevNumber = ''
if (!operator.includes(input)) {
prevNumber = input
setInput(prevNumber + number)
} else {
prevNumber = ''
setInput(number)
}
setResult(result + number)
}
if (number === '.') {
/*const array = result.split(' ')
const lastElement = array[array.length - 1]
if (!lastElement.includes('.')) {
setResult(result + '.')
}*/
const lastChat = result.charAt(result.length - 1)
if (!result.length) {
setInput('0.')
setResult('0.')
} else {
if (lastChat === '*' || operator.includes(lastChat)) {
setInput('0.')
setResult(`${result} 0.`)
} else {
setInput(
lastChat === '.' || input.includes('.') ? `${input}` : `${input}.`
)
const formattedValue =
lastChat === '.' || input.includes('.') ? `${result}` : `${result}.`
setResult(formattedValue)
}
}
}
}
useEffect(() => {
if (final) setInput(final)
}, [final])
return (
<div className='App container-fluid'>
<div className='main-box '>
<div className='text-white display'>
<div className='display-current'>{result}</div>
<div className='display-result' id='display'>
{input}
</div>
</div>
<div className='bottom-box container-fluid text-white'>
<div className='row'>
<div className='col-6 rg-w-50 rg-red rg-regular'>
<button id='clear' onClick={handleNumber}>
AC
</button>
</div>
<div className='col rg-darkgrey rg-regular'>
<button id='divide' onClick={handleNumber}>
/
</button>
</div>
<div className='col rg-darkgrey rg-regular'>
<button id='multiply' onClick={handleNumber}>
*
</button>
</div>
</div>
<div className='row'>
<div className='col rg-grey rg-regular'>
<button id='seven' onClick={handleNumber}>
7
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='eight' onClick={handleNumber}>
8
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='nine' onClick={handleNumber}>
9
</button>
</div>
<div className='col rg-darkgrey rg-regular'>
<button id='percent' onClick={handleNumber}>
%
</button>
</div>
</div>
<div className='row'>
<div className='col rg-grey rg-regular'>
<button id='four' onClick={handleNumber}>
4
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='five' onClick={handleNumber}>
5
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='six' onClick={handleNumber}>
6
</button>
</div>
<div className='col rg-darkgrey rg-regular'>
<button id='subtract' onClick={handleNumber}>
-
</button>
</div>
</div>
<div className='row'>
<div className='col rg-grey rg-regular'>
<button id='one' onClick={handleNumber}>
1
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='two' onClick={handleNumber}>
2
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='three' onClick={handleNumber}>
3
</button>
</div>
<div className='col rg-darkgrey rg-regular'>
<button id='add' onClick={handleNumber}>
+
</button>
</div>
</div>
<div className='row'>
<div className='col-6 rg-grey rg-w-50 rg-regular'>
<button id='zero' onClick={handleNumber}>
0
</button>
</div>
<div className='col rg-grey rg-regular'>
<button id='decimal' onClick={handleNumber}>
.
</button>
</div>
<div className='col rg-blue rg-regular'>
<button id='equals' onClick={handleNumber}>
=
</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default App