the function connected to the button is called without pressing

Question

I have a React-JS code:

class SideMenu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          inputNumber: '',
          inputMessage: ''
        };

        this.getAccountInfo = this.getAccountInfo.bind(this)
      }

    getAccountInfo(props) {
        console.log(props.inputNumber, props.inputMessage)
      }; 
      

    render() {

        return(
            <body className='SideMenuBg'>
                <div className='SideMenu'>
                    <frame className='sideMenuBackgroundFrame'>
                        <input type='text' value={this.state.inputNumber} onChange={evt => this.updateInputNumber(evt)} placeholder='Number'/>
                        <input type='text' value={this.state.inputMessage} onChange={evt => this.updateInputMessage(evt)} placeholder='Message'/>
                        <button onClick={this.getAccountInfo(this.state)}>press me</button>
                    </frame>
                </div>
            </body>
        )
    }

    updateInputNumber(evt) {
        const val = evt.target.value;   
        this.setState({
          inputNumber: val
        });
    }
    updateInputMessage(evt) {
        const val = evt.target.value;   
        this.setState({
          inputMessage: val
        });
    }

From this code, I expect that it will receive 2 values from my inputs and output them to the console ONLY after clicking the button. But instead, for some reason, my code launches the getAccountInfo function twice after any change in the values of my inputs. Moreover, when the button is pressed, the function is not invoked at all.

put the `getAccountInfo()` inside an anonymous function, Eg: `` — Phil, Aug 11 '23 at 16:38
Just look at the difference between the way you bind the `onChange` events and the way you bound the `onClick`... — Heretic Monkey, Aug 11 '23 at 16:55
Does this answer your question? [Why is my onClick being called on render? - React.js](https://stackoverflow.com/questions/34226076/why-is-my-onclick-being-called-on-render-react-js) — Heretic Monkey, Aug 11 '23 at 16:56

score 0 · Accepted Answer · answered Aug 11 '23 at 16:19

You are invoking the function getAccountInfo() (with brackets) when passing it to onClick. You should just pass it without the brackets. To access the state value, you don't need to pass them as arguments. Just read this.state in the function body. See modified code

class SideMenu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          inputNumber: '',
          inputMessage: ''
        };

        this.getAccountInfo = this.getAccountInfo.bind(this)
      }

    getAccountInfo() {
        console.log(this.state.inputNumber, this.state.inputMessage)
      }; 
      

    render() {

        return(
            <body className='SideMenuBg'>
                <div className='SideMenu'>
                    <frame className='sideMenuBackgroundFrame'>
                        <input type='text' value={this.state.inputNumber} onChange={this.updateInputNumber} placeholder='Number'/>
                        <input type='text' value={this.state.inputMessage} onChange={this.updateInputMessage} placeholder='Message'/>
                        <button onClick={this.getAccountInfo}>press me</button>
                    </frame>
                </div>
            </body>
        )
    }

    updateInputNumber(evt) {
        const val = evt.target.value;   
        this.setState({
          inputNumber: val
        });
    }
    updateInputMessage(evt) {
        const val = evt.target.value;   
        this.setState({
          inputMessage: val
        });
    }

the function connected to the button is called without pressing

1 Answers1