Don´t understand passing functions in React

I´m following a tutorial and I don´t understand why the following function declared in the App stateful component:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      result: ""
    }
  }

botonPresionado = nombreBoton => {
    if (nombreBoton === "=" ){
      this.calculate()
    } else {
      this.setState({
        result: this.state.result + nombreBoton
      })
    }
  }

Must also be declared in other way in the Keypad component:

class Keypad extends React.Component{
    //anclar funcion a estos botones:
    botonPresionado = e => {
        this.props.botonPresionado(e.target.name)
    }
    

All of the buttons have the botonPresionado function attached to it. But I want now to do another function (“cleanDisplay”) which I only want to attach/pass to the button which has the “AC” value. Now…I don´t know how to do that…

This should be the function:

cleanDisplay = () => {
    this.setState({
      result: ""
    })
  }

Should I first pass it here?:

 <Keypad botonPresionado={this.botonPresionado} />

And then on the Keypad component what should I put?

If I put this nothing works:

<button id="clear" name="clear" onClick={this.cleanDisplay}>AC</button>

This is my full code:

https://codepen.io/Assblack/pen/XwZMNv

It doesn’t have to be redeclared the function in your main component could just receive the event and work from that.

example:

const { Component } = React

class App extends Component {
  state = {
    form: {
      name: ''
    }
  }

  handleNameChange = event => {
    // grabbing value from event and renaming it name
    const { value: name } = event.target
    
    this.setState({
      form: {
        name // eq to name: name
      }
    })
  }
  
  render() {
    const { name } = this.state.form
    
    return(
      <form>
        <NameInput setName={this.handleNameChange} current={name} />
      </form>
    )
  }
}

const NameInput = ({ current, setName }) => {
  return(
    <div>
      <label>
        <span>Name: </span>
        <input
          type="text"
          value={current}
          onChange={setName}
          placeholder="I'm a stateful form element"
        />
      </label>
    </div>
  )
}

you can always declare additional functions to pass to a child component if you need to.