Error in call of Arrow function on button - React Native

Question

I want to call the clearMemory function by the "AC" button but I’m not getting it.

Follow the reference code:

export default class App extends Component {
  state = {
    displayValue: '0',
  }

  addDigit = n => {
    this.setState({ displayValue: n })
  }

  clearMemory = () => {
    this.setState({ displayValue: 0 })
  }

  setOperation = operation => {
    
  }

  render() {
    return (
      <View style={styles.container}>
        <Display value={this.state.displayValue} />
        <View style={styles.buttons}>
          <Button label='AC' triple onclick={this.clearMemory} />
          <Button label='/' operation onClick={() => this.setOperation('/')} />
          <Button label='7' onClick={() => this.addDigit(7)} />
          <Button label='8' onClick={() => this.addDigit(8)} />
          <Button label='9' onClick={() => this.addDigit(9)} />
          <Button label='*' operation onClick={() => this.setOperation('*')} />
          <Button label='4' onClick={() => this.addDigit(4)} />
          <Button label='5' onClick={() => this.addDigit(5)} />
          <Button label='6' onClick={() => this.addDigit(6)} />
          <Button label='-' operation onClick={() => this.setOperation('-')} />
          <Button label='1' onClick={() => this.addDigit(1)} />
          <Button label='2' onClick={() => this.addDigit(2)} />
          <Button label='3' onClick={() => this.addDigit(3)} />
          <Button label='+' operation onClick={() => this.setOperation('+')} />
          <Button label='0' double onClick={() => this.addDigit(0)} />
          <Button label='.' onClick={() => this.addDigit('.')} />
          <Button label='=' operation onClick={() =>this.setOperation('=')} />
        </View>
      </View>
    )
  }
}

I’m almost sure the problem is in the syntax of calling this function on the button:

<Button label='AC' triple onclick={this.clearMemory} />

*triple and double I set in another file

I’ve tried some alternatives, but I always find the following mistake:

Answer 1

In React Native there is no onClick event, but onPress. It seems that the button click event is automatically triggering when the component is mounted, which causes rendering and is in an infinite loop. Try passing an Arrow Function to the onPress button

onPress={()=>this.clearMemory()}