Hi, I am building the JavaScript calculator, and I binded keyboard keys NUMPAD but now the onClick method is not updating the result as like the keyPress method.
But I am using the same function (updateFormula) for handleKeyPress and handleClick Method so they should update the variables same (result, display and formula).
I tried many things but no luck yet.
Thank you I will be following your ternary conditions advice.
About the problem at the first my code was like this;
But using the onClick method is not updating this after another click which makes it updating later, Here is a pic of the onClick method is used:
I was able to make a few modifications to your code to get it to work correctly. I was correct about the array of duplicate numbers (from the numbers array and the numpad) array causing issues. You will need to make sure the array you use with the forEach does not include the duplicate numbers as elements (including the decimal characters).
You had also added an extra this.updateFormula(arr[i][0]); which I assume you had to do to get the display to update as you expected.
OK, so the real culprit in your code is how you are using setState at various places in your code. It is getting called at many places. In case you are not aware setState is asynchronous and React"batches" groups of calls to setState on its own. This means that sometimes when you try to reference this.state.someProperty at various points in various methods, it may not be updated as you think it should be. The render method will always have the latest state changes so it displays properly.
This FCC challenge on setState kind of glosses over how to handle this issue with a link to the React documentation. Basically, you need to pass a function to setState and the first argument of that function will contain the most current version of state for your app. Inside this function you would refer to whatever you want to name the function parameter (most people will name it state or prevState) and then replace all your references to this.state with state/preState. Also, you will need to return an object containing any of the updates to state properties you want to make.
An example of such a change would be in your updateFormula method:
Change the following:
this.setState({ formula: this.state.formula.concat(msg) });
to
this.setState(prevState => {
return {
formula: prevState.formula.concat(msg)
};
});
Another problem you will run into is inside your solver method you reference this.state.formula, so you will need to see if you can figure out how to pass the current state to that method without referencing this.state.
See if you can make all the changes and if you get stuck, let us know and we can try to guide you a bit more to a workable solution.
Thank you for your help and your interest .
I went to React Documentation and understood the problem tried some solutions didn’t worked also Functional setState link or method either. I will be trying to use Redux for this project because I see that methods going to make this project more complicated than it should be
I tried the setState((state)=>{formula: state.prevFormula})
(I defined also in “this.state” too)
which that was not working, also setState((prevState)=>{formula: prevState.Formula}) didn’t solved the problem.
I guess I m not that pro coder to handle those operations asyncronously with React. Seems like its better to dispatch actions aganist React, I was thinking that Redux could complicate things Seems like its better to handle state changes with a store.
Redux is no game either, I need to change many things, dispatching actions in older react versions is a like a puzzle, I can use some help 
.
I am ready for that a bit more workable solution. Thank you for all your help Randell .
Much appreciated.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.