Having problem with State not updating in React

Question

I have an JS Based Calculator app that I'm doing. I am facing problems in one particular section, wherein I have an element displayTop which is suuposed to display the whole operation of the calculator. The problem arises wherein if I have an expression that ends with a symbol (either +, -, *, /) then pressing another symbol must update the expression to end with that particular symbol. So I have used the replace function and even though it temporarily updates the value in the display, the console.log remains the same.

Here's my code:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "./Button.js";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      displayTop: 0,
      displayBot: 0,
      value: "Final Value",
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (id, name) => {
    if (this.state.displayBot == 0 && name != "AC") {
      this.setState({
        displayTop: name,
        displayBot: name,
      });
    } else if (name == "AC") {
      this.setState({
        displayTop: 0,
        displayBot: 0,
      });
    } else if (
      this.state.displayBot == "+" ||
      this.state.displayBot == "-" ||
      this.state.displayBot == "*" ||
      this.state.displayBot == "/"
    ) {
      this.setState({
        displayBot: name,
      });
      if (
        this.state.displayTop.endsWith("+") == true ||
        this.state.displayTop.endsWith("-") == true ||
        this.state.displayTop.endsWith("*") == true ||
        this.state.displayTop.endsWith("/") == true
      ) {

Now this is the place where the problem occurs:

        if (name == "+" || name == "-" || name == "*" || name == "/")
          console.log("ends with symbol");
        this.setState({
          displayTop: this.state.displayTop.replace(/.$/, name),
        });
        console.log(this.state.displayTop);

The concole.log still displays the previous value.

      }
    } else {
      this.setState({
        displayTop: this.state.displayTop + name,
      });
      switch (name) {
        case "+":
        case "-":
        case "*":
        case "/":
          this.setState({ displayBot: name });
          break;
        case "=":
          this.setState({ displayBot: this.state.value });
          this.setState({
            displayTop: this.state.displayTop + name + this.state.value,
          });
          break;
        default:
          this.setState({ displayBot: this.state.displayBot + name });
      }
    }
  };

  render() {
    return (
      <div id="container">
        <div id="displayTop">{this.state.displayTop}</div>
        <div id="display">{this.state.displayBot}</div>
        <Button onClick={this.handleClick} />
      </div>
    );
  }
}
export default App;

Answer 1

Right the problem might be that you are using the setState and operating inside:

if (name == "+" || name == "-" || name == "*" || name == "/")
      console.log("ends with symbol");
    this.setState({
      displayTop: this.state.displayTop.replace(/.$/, name),
    });

Try it like this:

if (name == "+" || name == "-" || name == "*" || name == "/")
    const newValue = this.state.displayTop.replace(/.$/, name);        
    this.setState({
      displayTop: newValue,
    });

Answer 2

Hi when you will use setState to update your state using your previous state value like this.state.displayTop you should always use setState callback.

if (name == "+" || name == "-" || name == "*" || name == "/")
    const newValue = this.state.displayTop.replace(/.$/, name);        
    this.setState(prevState => ({
      displayTop: prevState.displayTop.replace(/.$/, name)
    }));

Please read this article for setState callback