React, can't get current state, amend and set it as new state

I’m absolutely lost with React async setState, Can’t believe that i’ve wasted so much time on this and still unable solve it :frowning:
here is my code

Here’s what I want to achieve: when I click operator button, I take current(new\updated) state.input, ‘format’ it with my fixInput function line 121 (it takes state.input and clicked button textContent, returns new string), and set the result as next state.input value. line 65 - 83

React setState is async, and it’s not updating immediately, so i can access only previous state.input, i found that i can log to console current state from setState callback, and i need to set a new state, which I cannot do from callback. i can’t access current state, that is why my fixInput function is not working correctly

I did try to move things around in every way I could think of…

Is that possible at all with the structure i’ve got?

Thank you

It’s great that you have linked to the code. What would help us now is a bug report! Please tell us what, as a user I need to do to reproduce the problem in the calculator. With this it will be much easier to track it down as I don’t really know what fixInput is for, or what it is fixing. Doing some simple sums it seems to be working fine for me.

Hi, Martin,
Thank you for your time!

fixInput is basically for user story 13, about multiple operators.

input is a string to be evaluated on equals click and get the final result. there are handlers added to every button in keypad component with corresponding type (operator, number,equals,decimal,clear).
fixInput is used in handleOper (handle operator), what it does is checking 3 conditions, to control operators characters

  1. if the last 2 characters in input string are operators and are not one of two allowed combinations (/- or *-), it replaces both with the last clicked operator,
  2. if the last 3 characters are operators, it replaces all 3 with the last clicked operator
  3. base case add operator to the input string

and returns a new string which was supposed to be new state.input

  handleOperClick = (e) => {
    const value = e.target.textContent;

    this.setState(
      (state, props) => {
      //here  state is previous state, e.g. on display its  8++, here  it would be  8+ etc
   
        return {
          input: fixInput(state.input, value), /*<---i  want  this  to  be formatted input string with correct number of operators
           if you try to press say  8++ it will let you do it, althought its not one of allowed combinations,
            because, if i get it right, input state is not updated yet, 
            new state is pending, and  my function operates previous state*/

          decimal: false,
          showInput: true,
        };
      },
      () => {
        console.log(this.state.input); /*current input state, what you see on display, 
        i  want to use current input  to ceate new state.input value */
      }
    );
  };

Is it possible to make it work with this structure?