Реагировать на прочитанное значение нажатой кнопки

Извините, если эта тема, вероятно, является копией другой, но я не понимаю, что я делаю не так со своим кодом + я действительно новичок, чтобы отреагировать. Я пробовал несколько решений, но ни одно из них не помогло. Я помещу сюда часть сообщения, которое я прочитал:

• React js onClick не может передать значение методу

• Как мне узнать идентификатор нажатой кнопки? ReactJS

• Как передать идентификатор тега функции onClick в React?

Проблема

Мне нужно console.info строку внутри value с помощью handleInput

Код

import React, {Component} from 'react';
import Button from './Button';
import Screen from './screen';
import './keyboard.css'

class NumberKeyboard extends Component {
    constructor(props){
        super(props)
        this.state = {
            operations: []
        }

    }

handleInput(props) {
    const buttonValue= this.props.value;
    console.info(buttonValue)
}


    render() {


        return (
            <div className = "keyboard">
                <div className = "column"></div>
                <div className = "column">
                    <div className = "keyboardRow roundBorder" value = {"example"} onClick = {() => this.handleInput('value')}>
                        <Screen className = "crystalScreen"></Screen>
                        <Button value = "clear" >C</Button> 
                        <Button value = "±">±</Button>
                        <Button value = ".">.</Button>
                        <Button value = "">+</Button>
                    </div>
                    <div className = "keyboardRow">
                        <Button value = "clear">1</Button>
                        <Button value = "2">2</Button>
                        <Button value = "3">3</Button>
                        <Button value = "-">-</Button>
                    </div>
                    <div className = "keyboardRow">
                        <Button value = "4">4</Button>
                        <Button value = "5">5</Button>
                        <Button value = "6">6</Button>
                        <Button value = "*">X</Button>
                    </div>
                    <div className = "keyboardRow lastRow">
                        <Button value = "7">7</Button>
                        <Button value = "8">8</Button>
                        <Button value = "9">9</Button>
                        <Button value = "%">÷</Button>
                    </div>
                </div>

                <div className = "column"></div>
            </div>
        )
    }
}

export default NumberKeyboard;

Я пробовал несколько попыток решить эту проблему, но каждый раз максимальный результат, который у меня был, был, к сожалению, неопределенным или ошибкой.

--------------------------- ОБНОВИТЬ ---------------------- ---

В связи с посещением этого поста я хочу немного обновить и показать пример, основанный также на хуках:

import React, { useState } from 'react';
import KeyboardRow from 'src/components/keyboardRow'; /* ideally this
 should contain the buttons element. i'm writing in this way just to stay 
 closer to the initial question */  

function NumberKeyboard() {
  const [selectedNumber, setSelectedNumber] = useState(0);

  const selectNumber = numberSelected => {
       setSelectedNumber(numberSelected)
  }

  return (
  <>
    <KeyboardRow >
       <Button onClick = {selectNumber} value = "7">7</Button>
       <Button onClick = {selectNumber} value = "8">8</Button>
       <Button onClick = {selectNumber} value = "9">9</Button>
    </KeyboardRow >
    <div>{selectedNumber}<div>
  </>
  );
}