React Functional Custom Button Not Registering A Click

Question

So here is my functional Button component

export const MyButton = (props) => {
    return (
        <button className="myButton">{props.text}</button>
    )
}

And I used it in another page like

<MyButton text="Update" onClick={this.checkIt} />

Where that checkIt function is just console logging the state of the class I used it in. But for some reason, it isn't registering the click at all. How can I go about solving it? I implemented in a similar way for input field where I used the props.onChange(event.target.value) and that is working properly.

Finally, your dom element should receive a handle. In your case, you should assign a handle to <button /> — Long Nguyen Duc
– Long Nguyen Duc, Commented Aug 24, 2020 at 9:41

sachinkondana · Accepted Answer · 2020-08-24 09:18:56Z

4

You should attach events in child components, otherwise it's not bind to actual UI at all!

Solution 1:

export const MyButton = ({text, ...others}) => {
    return (
        <button className="myButton" {...others}>{text}</button>
    )
}

Solution 2:

export const MyButton = ({text, onClick}) => {
    return (
        <button className="myButton" onClick={onClick}>{text}</button>
    )
}

answered Aug 24, 2020 at 9:18

sachinkondana

6916 silver badges15 bronze badges

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

Comments

GURU MAHESH K · Accepted Answer · 2020-08-24 09:27:33Z

1

You can't use onClick on MyButton component directly because MyButton component isn't a Native DOM element it is just another REACT component and onClick is treated as another property MyButton Component. What you need to do is, inside of MyButton component pass the onClick component to DOM element Button

export const MyButton = (props) => {
  return (
    <button className="myButton" onClick={props.onClick}>{props.text}</button>
   )
}

answered Aug 24, 2020 at 9:27

GURU MAHESH K

665 bronze badges

Collectives™ on Stack Overflow

React Functional Custom Button Not Registering A Click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related