Passing in a value through the onClick method to parent component but its undefined

Question

I'm new to React so apologies if this is a simple/silly question. I'm trying to create a simple calculator app using React and I'm trying to simply print the value of a button I click. I've got a keypad component which will render all the buttions, but for now I only have one.

const Keypad = () => {
    return (
        <div className="Keypad">
            <button name='1' onClick={e => this.onClick(e.name)}>1</button>
            
        </div>
    )
}

export default Keypad

In my main App file I've got an onClick method which will check the value of the button pressed and print it and when I call the Keypad component I call onClick as well:

const onClick = (e) => {
    if (e.name === "1") {
      console.log(e.name)
    } else {
      console.log("nope")
    }
  };

return (
    <div className="Header">
      <header>
        <h1>Calculator</h1>
      </header>
      <Result />
      <Keypad onClick={onClick}/>
    </div>
  );

It compiles successfully, but when I try and click the button I get a "TypeError: Cannot read property 'onClick' of undefined" error. I've followed some steps from different websites and am confused as to why this doesnt work..

S. Hesam · Accepted Answer · 2021-07-03 05:21:12Z

1

You used a functional component, so the this keyword is redundant.

const Keypad = ({onClick}) => {
    return (
        <div className="Keypad">
            <button name='1' onClick={onClick}>1</button>
            
        </div>
    )
}

export default Keypad

and you pass the e.nameto the onClick function in your Keypad component.

const onClick = (e) => {
    if (e.target.name === "1") {
      console.log(e.target.name)
    } else {
      console.log("nope")
    }
  };

return (
    <div className="Header">
      <header>
        <h1>Calculator</h1>
      </header>
      <Result />
      <Keypad onClick={onClick}/>
    </div>
  );

edited Jul 3, 2021 at 5:21

answered Jul 3, 2021 at 5:16

S. Hesam

7,1596 gold badges46 silver badges66 bronze badges

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

2 Comments

lagoon__themoon Over a year ago

Thanks for that. I didnt know the 'this' keyword wasn't needed if functional components were being used :). If i may ask, I would like to print the values on the screen using the Result component which looks like this:

const Result = (props) => {         return (             <div className="Result">                 <p>{props.result}</p>             </div>         ) }

Shouldn't it work if i pass <Result result={e.target.name} /> in onClick?

Drew Reese Over a year ago

@lagoon__themoon No, e isn't in scope in the component, and you can't return and render JSX from a callback. You would necessarily need to save it into state and pass as a prop to Result.

Drew Reese · Accepted Answer · 2021-07-03 05:19:41Z

1

Keypad component has no defined this and no onClick callback defined, it's passed as a prop from the parent.

const Keypad = ({ onClick }) => {
  return (
    <div className="Keypad">
      <button name='1' onClick={onClick}>1</button>
    </div>
  )
}

Event e, it should be e.target.name.

const onClick = (e) => {
  if (e.target.name === "1") {
    console.log(e.target.name)
  } else {
    console.log("nope")
  }
};

return (
  <div className="Header">
    <header>
      <h1>Calculator</h1>
    </header>
    <Result />
    <Keypad onClick={onClick}/>
  </div>
);

answered Jul 3, 2021 at 5:19

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

1 Comment

lagoon__themoon Over a year ago

I didn't realise I had to pass in onClick as a prop to Keypad and that 'this' isnt needed if functional components are being used. I have a lot to learn..

Collectives™ on Stack Overflow

Passing in a value through the onClick method to parent component but its undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related