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

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

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?
@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

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

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related