How to access event.target.value from React component

Question

I can't access the value of event.target.value from a React child Component, but I can from an HTML tag.

In the example given: it doesn't work for the Button tag (React Component) but works for the button tag (html tag).


import React from "react";
import Button from "./components/Button";

class Calculator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            topText: "0"
        }
        this.handleClick = this.handleClick.bind(this);

    }

        handleClick(event) {
            this.setState({ topText: event.target.value })
        }

    render() {
        return (
            <div>
                <div>{this.state.topText}</div>
                <Button value='1' onClick={this.handleClick}/>
                <button value="2" onClick={this.handleClick}>2</button>
            </div>
        )
}
}

export default Calculator

can you provide the code for ./components/Button?

Jamal Abo
– Jamal Abo

2019-06-25 22:32:42 +00:00
Commented Jun 25, 2019 at 22:32 — Jamal Abo
– Jamal Abo, Commented Jun 25, 2019 at 22:32

Dinesh Pandiyan · Accepted Answer · 2019-06-25 23:54:37Z

1

You cannot have onClick on components. They have to be on DOM elements (Eg. div, button, etc).

Here, Button is a component. The solution will be to pass in onClick as a prop and attach it to the element in Button component.

function Button(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

edited Jun 25, 2019 at 23:54

answered Jun 25, 2019 at 23:30

Dinesh Pandiyan

6,3293 gold badges36 silver badges50 bronze badges

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

Comments

Anil Kumar · Accepted Answer · 2019-06-25 22:33:00Z

0

Do you have onClick handled inside your button component ? If no thats the reason.

As you are passing onClick props on Button component, So inside Button component.

<button  onClick={onClick}/>

At the end onClick should be on HTML component only inside Button.

answered Jun 25, 2019 at 22:33

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

Comments

Denz · Accepted Answer · 2019-06-25 23:43:28Z

0

This is because onClick is passed as a prop for the button component. As long as you handle the prop inside the component you should be fine.

This should be inside your button component.

render () {
    return <button  onClick={this.props.onClick}/>2</button>;
}

answered Jun 25, 2019 at 23:43

Denz

1464 bronze badges

Collectives™ on Stack Overflow

How to access event.target.value from React component

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related