OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

State is reverting back even after i confirmed its change

  • Thread starter Thread starter Baljinder Singh
  • Start date Start date
B

Baljinder Singh

Guest
so when i click evalute this expression '3+5*6-2/4' then result state is set to 32.5 after that clear function is being triggered and it sets the state to '' and after that when i press 5 it reverts the previous state which is '32.5' and add '5' into it making it '32.55' this behaviour is not observed first few test i am using fcc test bundle to test the code but before i can complete it ran into this problem and below given are logs of the print statements

Code:
import React, { useState, useEffect } from "react";
import './JavaScriptCalculator.css';
function JavaScriptCalculator() {
    const [exp, setExp] = useState('');
    const [ans, setAns] = useState('0');
    const [s, ss] = useState(true);
    function setstate(e, a, s = true,v='') {
        console.log(e, a, s,v);
        setExp(e);
        setAns(a);
        ss(s);
    }
    function click(v) {
        switch (v) {
            case 'A': setstate('', '0',true,v);setstate('', '0',true,v); break;
            case 'E': setstate(eval(exp), eval(exp), false,v); break;
            default:  setstate(exp + v, '',true,v); break;
        }
    }
    return (
        <div id="calculatorbackground">
            <div id="calculator">
                <div id="display">
                    <div id="Expression">{s && exp}</div><div id="Answere">{ans}</div>
                </div>
                <div onClick={() => click('A')} id="clear">AC</div>
                <div onClick={() => click('C')} id="back">{'<-'}</div>
                <div onClick={() => click('/')} data-value="/" id="divide">/</div>
                <div onClick={() => click('*')} data-value="*" id="multiply">x</div>
                <div onClick={() => click('7')} data-value="7" id="seven">7</div>
                <div onClick={() => click('8')} data-value="8" id="eight">8</div>
                <div onClick={() => click('9')} data-value="9" id="nine">9</div>
                <div onClick={() => click('-')} data-value="-" id="subtract">-</div>
                <div onClick={() => click('4')} data-value="4" id="four">4</div>
                <div onClick={() => click('5')} data-value="5" id="five">5</div>
                <div onClick={() => click('6')} data-value="6" id="six">6</div>
                <div onClick={() => click('+')} data-value="+" id="add">+</div>
                <div onClick={() => click('1')} data-value="1" id="one">1</div>
                <div onClick={() => click('2')} data-value="2" id="two">2</div>
                <div onClick={() => click('3')} data-value="3" id="three">3</div>
                <div onClick={() => click('E')} id="equals">=</div>
                <div onClick={() => click('0')} data-value="0" id="zero">0</div>
                <div onClick={() => click('.')} data-value="." id="decimal">.</div>
                <div onClick={() => click('L')}>L</div>
            </div>
        </div>
    );
}

export default JavaScriptCalculator;

Code:
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
 0 true A
5  true 5
5*  true *
5*1  true 1
5*1+  true +
5*1+5  true 5
5*1+5+  true +
5*1+5+9  true 9
5*1+5+92  true 2
102 102 false 'E'
 0 true A
 0 true A
 0 true A
 0 true A
1  true 1
12  true 2
123  true 3
 0 true A
 0 true A
3  true 3
3+  true +
3+5  true 5
3+5*  true *
3+5*6  true 6
3+5*6-  true -
3+5*6-2  true 2
3+5*6-2/  true /
3+5*6-2/4  true 4
32.5 32.5 false 'E'
 0 true A
 0 true A
32.55  true 5
32.55-  true -
32.55-9  true 9
32.55-9+  true +
32.55-9+5  true 5
28.549999999999997 28.549999999999997 false 'E'
 0 true A
 0 true A
0  true 0
00  true 0
000  true 0
 0 true A
 0 true A
5  true 5
5.  true .
5..  true .
5..0  true 0
 0 true A
 0 true A
1  true 1
10  true 0
10.  true .
10.5  true 5
10.5-  true -
10.5-5  true 5
10.5-5.  true .
10.5-5.5  true 5
5 5 false 'E'
 0 true A
 0 true A
55  true 5
55*  true *
55*5  true 5
55*5.  true .
55*5.5  true 5
302.5 302.5 false 'E'
 0 true A
 0 true A
5  true 5
5*  true *
5*-  true -
5*-5  true 5
-25 -25 false 'E'
 0 true A
 0 true A
-255  true 5
-255*  true *
-255*-  true -
-255*-+  true +
-255*-+5  true 5
1275 1275 false 'E'
 0 true A
 0 true A
5  true 5
5-  true -
5-2  true 2
3 3 false 'E'
3/  true /
3/2  true 2
1.5 1.5 false 'E'
 0 true A
 0 true A
1.55  true 5
1.55+  true +
1.55+5  true 5
6.55 6.55 false 'E'
6.55+  true +
6.55+3  true 3
9.55 9.55 false 'E'
 0 true A
 0 true A
2  true 2
2/  true /
2/7  true 7
0.2857142857142857 0.2857142857142857 false 'E'
 0 true A
 0 true A```

<p>so when i click evalute this expression '3+5*6-2/4' then result state is set to 32.5
after that clear function is being triggered and it sets the state to '' and after that when i press 5 it reverts the previous state which is '32.5' and add '5' into it making it '32.55' this behaviour is not observed first few test
i am using fcc test bundle to test the code but before i can complete it ran into this problem
and below given are logs of the print statements</p>
<pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
import './JavaScriptCalculator.css';
function JavaScriptCalculator() {
const [exp, setExp] = useState('');
const [ans, setAns] = useState('0');
const [s, ss] = useState(true);
function setstate(e, a, s = true,v='') {
console.log(e, a, s,v);
setExp(e);
setAns(a);
ss(s);
}
function click(v) {
switch (v) {
case 'A': setstate('', '0',true,v);setstate('', '0',true,v); break;
case 'E': setstate(eval(exp), eval(exp), false,v); break;
default: setstate(exp + v, '',true,v); break;
}
}
return (
<div id="calculatorbackground">
<div id="calculator">
<div id="display">
<div id="Expression">{s && exp}</div><div id="Answere">{ans}</div>
</div>
<div onClick={() => click('A')} id="clear">AC</div>
<div onClick={() => click('C')} id="back">{'<-'}</div>
<div onClick={() => click('/')} data-value="/" id="divide">/</div>
<div onClick={() => click('*')} data-value="*" id="multiply">x</div>
<div onClick={() => click('7')} data-value="7" id="seven">7</div>
<div onClick={() => click('8')} data-value="8" id="eight">8</div>
<div onClick={() => click('9')} data-value="9" id="nine">9</div>
<div onClick={() => click('-')} data-value="-" id="subtract">-</div>
<div onClick={() => click('4')} data-value="4" id="four">4</div>
<div onClick={() => click('5')} data-value="5" id="five">5</div>
<div onClick={() => click('6')} data-value="6" id="six">6</div>
<div onClick={() => click('+')} data-value="+" id="add">+</div>
<div onClick={() => click('1')} data-value="1" id="one">1</div>
<div onClick={() => click('2')} data-value="2" id="two">2</div>
<div onClick={() => click('3')} data-value="3" id="three">3</div>
<div onClick={() => click('E')} id="equals">=</div>
<div onClick={() => click('0')} data-value="0" id="zero">0</div>
<div onClick={() => click('.')} data-value="." id="decimal">.</div>
<div onClick={() => click('L')}>L</div>
</div>
</div>
);
}

export default JavaScriptCalculator;
</code></pre>
<pre><code> 0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
0 true A
5 true 5
5* true *
5*1 true 1
5*1+ true +
5*1+5 true 5
5*1+5+ true +
5*1+5+9 true 9
5*1+5+92 true 2
102 102 false 'E'
0 true A
0 true A
0 true A
0 true A
1 true 1
12 true 2
123 true 3
0 true A
0 true A
3 true 3
3+ true +
3+5 true 5
3+5* true *
3+5*6 true 6
3+5*6- true -
3+5*6-2 true 2
3+5*6-2/ true /
3+5*6-2/4 true 4
32.5 32.5 false 'E'
0 true A
0 true A
32.55 true 5
32.55- true -
32.55-9 true 9
32.55-9+ true +
32.55-9+5 true 5
28.549999999999997 28.549999999999997 false 'E'
0 true A
0 true A
0 true 0
00 true 0
000 true 0
0 true A
0 true A
5 true 5
5. true .
5.. true .
5..0 true 0
0 true A
0 true A
1 true 1
10 true 0
10. true .
10.5 true 5
10.5- true -
10.5-5 true 5
10.5-5. true .
10.5-5.5 true 5
5 5 false 'E'
0 true A
0 true A
55 true 5
55* true *
55*5 true 5
55*5. true .
55*5.5 true 5
302.5 302.5 false 'E'
0 true A
0 true A
5 true 5
5* true *
5*- true -
5*-5 true 5
-25 -25 false 'E'
0 true A
0 true A
-255 true 5
-255* true *
-255*- true -
-255*-+ true +
-255*-+5 true 5
1275 1275 false 'E'
0 true A
0 true A
5 true 5
5- true -
5-2 true 2
3 3 false 'E'
3/ true /
3/2 true 2
1.5 1.5 false 'E'
0 true A
0 true A
1.55 true 5
1.55+ true +
1.55+5 true 5
6.55 6.55 false 'E'
6.55+ true +
6.55+3 true 3
9.55 9.55 false 'E'
0 true A
0 true A
2 true 2
2/ true /
2/7 true 7
0.2857142857142857 0.2857142857142857 false 'E'
0 true A
0 true A```
</code></pre>
 
Top