I need to add the following line
How can I do that in order to maintain the toggle functionality working? Adding it as it is doesn´t really work.
I am confused about what you are trying to do here:
else if (id === "decimal") {
this.setState({ decimal: true });
if (!this.state.decimal) {
this.setState(prevState => ({
value: prevState.value + result
}));
}
First problem - you set state.decimal to true. Then you immediately check if it is true. What is the logic of that?
The second problem is that setState is asynchronous. There is no guarantee that when you check it with if (!this.state.decimal) { that the setState will have completed. If you have something to do after that setState that is dependent on the setState being finished, then you can put it in a callback to that setState.
But it is “dependent” on that variable being ‘true’ when you know it is supposed to be, why not just combine the two setStates and get rid of the if?
Thanks for the reply. I´m trying to refactor this code using a switch statement. But I can´t seem to get the decimal to work in the switch like it does here:
I don’t know what to say. I agree with you that that would be better as a switch. And I still say that the logic (in the block of quoted above) is screwy for the reasons I stated above - the logic doesn’t make sense. And there is a race condition with the setState.
Does it work for him? I don’t know. Maybe that code sandbox is slow enough that state gets set before it is tested. But that is a baaaaad thing to assume. That is sloppy coding. Why do you want to copy bad code? You will learn soooooo much more if you work the code out yourself. Even if it takes several tries, you will learn so much more.
HAHAH, that´s actually my code (I wrote 90% of it, only needed help with the decimals which I got off StackOverFlow). Thing is, I reworked most of my stuff using a switch (as you can see in the first post), but I can´t, for the like of me, figure a way to solve this decimal problem. Do you have any idea?
Is my switch block alright at least?
Oops, sorry, didn’t realize it was yours. No offense meant by my comments. A few years ago I was making these same mistakes, now I’m a professional React Native dev, so keep at it.
Again, the switch seems like a better choice.
But looking at the original code, I still think that:
} else if (id === "decimal") {
this.setState({ decimal: true });
if (!this.state.decimal) {
this.setState(prevState => ({
value: prevState.value + result
}));
}
} else {
could be better written as:
} else if (id === "decimal") {
this.setState(prevState => ({
decimal: true,
value: prevState.value + result
}));
} else {
The switch from if/else to switch should be trivial.
What is the “decimal problem” you are talking about? Do you have a working copy of the new code?
Basically, I´m trying to limit the use of decimals in the calculator. This means: only one decimal should be allowed after a number and no decimal after operators. I struggled to find a solution to this (a regex was my first option), but I couldn´t come up with one. Someone suggested this boolean approach which I liked, but it also brings a whole bunch of sideeffects which I had to correct one by one (for instance, after pressing equals, you could still add another decimals). This solution works in the codesandbox, but it looks so fugly. I have yet to solve the issue in an elegant way. Can I show you my code so far and you tell me if it´s good and / or prof looking?
Yeah, I remember running into that problem. I think I handled it, by, when they entered a decimal point, I checked to see if one was OK at that point. I think I kept everything in a string and just checked it. Another extension for that idea would be to use the disabled prop on the Button.
1 Like
I like that idea. But how does it work exactly? Like, could I set it in the switch after clicking decimal and then remove it after the equals is passed? But, since the state is one thing and the prop is in the button so to speak, how could I set it up? In the other scenario, did you do the check with indexof?
How does the code look so far? Sorry to be such a bother, but I really want to know.
The disabled prop can accept whatever. You can use any variable, but obviously something on state or props makes sense. You just need some kind of boolean flag as to whether or not it should be disabled. If you add a decimal point you set the flag that disables that button, and then once you get to a point in the input where another decimal point is acceptable, you flip it. Alternatively, it could be a local variable that has access to the current input string and determines if a decimal point is permitted. There are different ways to do it.
Sorry, could storing everything in a string and then doing an “else if” in the Handleclick with indexof to search for a dot and only if it doesn´t return -1 set the state with the dot work?
Well, you’ve got to figure how to make it work with your set up.
It seems that you are storing it as a numerical value. In that case perhaps you need to check if it is an integer. If it is an integer, then the decimal point is enabled, or something like that. A handy test in JS to see if something is an integer is num%1.
I refactored it, but I don´t know why it isn´t working properly
I’m not saying you should change value to a string - that’s just what I did because of the overall plan I had. Just think though what you want to do. Think through the logic. Break it into small tasks and work it out. Figure out how to figure out if you should allow a decimal point. That would be my first thing. Just put some logic in your render method and console.log it out and see if you can get it to work. I would have done this the the Display component which I would have put in another file. I would have broken all of those things into their own components, the header, the display, the buttons, everything.