Sorry if this topic it's probably a copy of another one, but i don't understand what i'm doing wrong with my code + i'm really new to react. I tried several solutions but none of them worked. I will put here some of the post that i read:

• React js onClick can't pass value to method




• How do I get the id of a button that was clicked? ReactJS



• How to pass tag id to to onClick function in react?

Problem

I need to console.log the string inside value with handleInput

Code

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.log(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;

i tried several attempts to solve it but every time the max result that i had it was the sadly undefined or an error.

--------------------------- UPDATE -------------------------

Due to visits of these post i want to give a little update and set an example based on hooks too:

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>

  </>

  );

}