Use child component props value in event handler in react - reactjs

Question

Here is my code
import React from 'react';
import './style.scss';
const CalcButton = (props) => {
return (
<button id="calcBtn" style={props.style} onClick={props.onClick}>
{props.btnText}
</button>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentNum: '0',
log: ' ',
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
console.log('a', e.target.value);
this.setState((state) => ({
currentNum: state.currentNum + e.target.getAttribute(this.props.btnText),
}));
}
render() {
return (
<div id="container">
<div id="display">
<h3 id="log">{this.state.log}</h3>
<h3 id="currentNum">{this.state.currentNum}</h3>
</div>
<CalcButton
style={{
width: 150,
backgroundColor: 'rgb(173, 0, 0)',
}}
btnText="AC"
onClick={() => {
return this.setState({
currentNum: '',
log: '',
});
}}
/>
<CalcButton
btnText="/"
style={{
backgroundColor: 'gray',
}}
/>
<CalcButton
btnText="X"
style={{
backgroundColor: 'gray',
}}
/>
<CalcButton btnText="7" onClick={this.handleClick}/>
<CalcButton btnText="8" />
<CalcButton btnText="9" />
<CalcButton
btnText="-"
style={{
backgroundColor: 'gray',
}}
/>
<CalcButton btnText="4" />
<CalcButton btnText="5" />
<CalcButton btnText="6" />
<CalcButton
btnText="+"
style={{
backgroundColor: 'gray',
}}
/>
<CalcButton btnText="1" />
<CalcButton btnText="2" />
<CalcButton btnText="3" />
<CalcButton
btnText="="
style={{
float: 'right',
height: 150,
backgroundColor: 'rgb(34, 86, 134)',
}}
/>
<CalcButton
btnText="0"
style={{
width: 150,
}}
/>
<CalcButton btnText="." />
</div>
);
}
}
export default App;
As you can see I am trying to build a calculator, but the problem I am facing is that I want to use btnText prop value of CalcButton in handleClick event handler, but I am unable to figure out how to access it in the said event handler. I know it is a very basic problem but trust me I have searched and unable to find any reference regarding my problem, kindly help.

Answer 1

add data-btntext={props.btnText} to the button element in the CalcButton function. Then access it with e.target.dataset.btntext. –
Emil Karlsson
The above mentioned comment solves the problem,although I do agree with #maxagno3's answer, however, since I am still learning, I really wanted to learn that concept.
Thanks for all the answers.

Answer 2

I do not think you need to create CalcButton component. Since your button text is going to be the same, you can do it the following way -
Create a new state which stores your button texts in an array.
Map over that state and create buttons for the calculator.
When using the handle click function, pass in the button text value.
In that function check if the button text is AC then execute another function or set the state value. Better if you create a separate function for the AC button and call it in the if-else condition you'd be doing inside the handleClick function.
If you really need to create the component then you'd need to add the handle click function to the multiple components you are reusing and pass in the value of button text into it as an argument.
I hope this helps.

Answer 3

in child component :
const CalcButton = (props) => {
const handleClick = () => {
if (props.onClick) {
props.onClick(props.btnText);
}
};
return (
<button id="calcBtn" style={props.style} onClick={handleClick}>
{props.btnText}
</button>
);
};
In Parent component :
class App extends React.Component { ...
handleClick(val) {
console.log('a', val);
this.setState((state) => ({
currentNum: state.currentNum + val,
}));
}
......
<CalcButton btnText="7" onClick={this.handleClick}/>