React: undefined in state

The state gets initialized to “0” which displays 0 on the screen. However, when I press the “.” (which has an onClick event handler that runs the inputDot function), it gets changes to undefined + a dot (“undefined.”). I don´t understand why this happens.

class Calculator extends Component {
  state = {
    displayValue:"0",
    operator: null,
    pendingOperation: false,
    newValue: null
  };
  
inputDot(){
const displayValue=this.displayValue;
  this.setState({
    displayValue: displayValue + "."
  }) 
console.log(this.displayValue)
}


inputDigit(digit){
  console.log(this.state.displayValue)
  const {pendingOperation, displayValue } = this.state;
   
  if(pendingOperation){
    this.setState({
      displayValue: String(digit)
    })
  }
else{
  this.setState({
    displayValue: displayValue==="0" ? String(digit) :  displayValue + String(digit)
  }) 
  console.log(this.state.displayValue)
}
}

  render() {
    return (
      <div id="container">
      <div>{(this.state.displayValue)}</div>
      <div id="function-keys">
      <button type="button">Clear</button>
      <button type="button">%</button> 
      </div>
      <div id="number-keys">
      <button type="button"onClick={() => this.inputDigit(0)}>0</button>
      <button type="button"onClick={() => this.inputDigit(1)}>1</button>
      <button type="button"onClick={() => this.inputDigit(2)}>2</button>
      <button type="button"onClick={() => this.inputDigit(3)}>3</button> 
      <button type="button"onClick={() => this.inputDigit(4)}>4</button>
      <button type="button"onClick={() => this.inputDigit(5)}>5</button>
      <button type="button"onClick={() => this.inputDigit(6)}>6</button>
      <button type="button"onClick={() => this.inputDigit(7)}>7</button> 
      <button type="button"onClick={() => this.inputDigit(8)}>8</button>
      <button type="button"onClick={() => this.inputDigit(9)}>9</button> 
      </div>
      <div id="operator-keys">
      <button type="button">-</button>
      <button type="button">+</button> 
      <button type="button">*</button> 
      <button type="button">/</button> 
      <button type="button">=</button> 
      <button type="button"onClick={() => this.inputDot()}>.</button> 
      </div>
      </div>
    );
  }
}

export default Calculator;

You should format the code to make it more readable. Also you should explain what you are actually trying to do, as it is it’s guess work from us. Are you trying to increment the value?, if so, you need to use the increment operator ++. Note that you are only using 1 plus sign but you need to use 2 with no space. i.e.: displayValue++

Another thing, in state you are using a string for the displayValue property, not a number.

I pasted the entire code and provided a more concise explanation. I´m trying to add a “.” to the displayValue. I know it´s a string, that´s intentional.

I am really not sure what you are trying to do but trying fixing this:

const displayValue=this.displayValue;

It should be this.state.displayValue;