React read value of button clicked

Question

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:

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>
  </>
  );
}

Triyugi Narayan Mani · Accepted Answer · 2018-11-27 11:23:10Z

22

You are sending and receiving data in a wrong way. First, you need to use onClick={this.handleInput} or onClick={(e) => this.handleInput(e,'value')} instead of onClick={() => this.handleInput('value')} because you are sending 'value' string in function.

<div className="keyboardRow roundBorder" value={"example"} onClick={e => this.handleInput(e, "value")} >

And then receive in following ways:

handleInput(e) {
    console.log(e.target.value);
}

You ca check the working demo.

answered Nov 27, 2018 at 11:23

Triyugi Narayan Mani

3,1098 gold badges38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Legeo Over a year ago

Can i ask a little thing ? Just to be sure that I really understand what you wrote ( because yeah, it's work ): onClick={e => this.handleInput(e, "value")} the " e " stand for the children button that i click ?

Irshad Babar Over a year ago

e is the event that is generated based on your click for the current element

amazonic · Accepted Answer · 2018-11-27 11:22:11Z

4

First of all, your buttons don't currently do anything when clicked, so what we're going to need to do is add an onClick to each of your buttons: <Button onClick={this.handleInput} value="clear">C</Button>.

This will pass the event to handleInput.

To get the value of the button clicked we can do:

handleInput(el) {
    console.log(el.target.value);
}

answered Nov 27, 2018 at 11:22

amazonic

3561 silver badge8 bronze badges

Comments

noa-dev · Accepted Answer · 2018-11-27 11:58:02Z

3

You could use the event object. Something like:

    handleInput = e => {
      const buttonValue = e.target.value;
      console.log(buttonValue);
      //some logic
}

And then you could add the method on the onClick event, passing the event object as well.

   onClick = {this.handleInput}

edited Nov 27, 2018 at 11:58

noa-dev

3,6419 gold badges36 silver badges73 bronze badges

answered Nov 27, 2018 at 11:20

Ovi

3021 gold badge4 silver badges13 bronze badges

Comments

Mouleesh Guru · Accepted Answer · 2018-11-27 11:25:11Z

2

In handleInput function you were passing the "props" but using using "this.props"
onClick should be there for every button
Should not pass the string 'value' rather do this "onClick={(e) => this.handleInput(e)}"
you can access with event.target.value

answered Nov 27, 2018 at 11:25

Mouleesh Guru

551 silver badge10 bronze badges

Collectives™ on Stack Overflow

React read value of button clicked

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related