CODEWITHSUNDEEP
reactjs
Azeem
Azeem

Reputation: 13

Use child component props value in event handler in react

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.

Upvotes: 0

Views: 818

Answers (3)

Azeem
Azeem

Reputation: 13

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.

Upvotes: 1

Shadi Amr
Shadi Amr

Reputation: 510

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}/>

Upvotes: 0

maxagno3
maxagno3

Reputation: 196

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.

Upvotes: 0

Related Questions