I was playing around with react for my first time and ran into some issues. I am creating 3 buttons with values and then executing a function when they're clicked that sends a post request and gets back data which is displayed to the user. For some reason, the _postURL function is being executed infinitely even when I dont click on the buttons. Does anyone know why?

var Test = React.createClass({
getInitialState: function(){

        return { logs: []};
    },
    _postURL: function(name){
        self = this;
        console.log(name);
        $.post("http://localhost:8080/DatabaseDemo/Display.do", {query: name})
            .done(function(data){
                console.log(data);
                self.setState({logs: data});
        });

    },
    render: function() {
        if(!this.state.logs){
            logs = <p>Choose a log</p>
        }
        return (
            <div>
                <form>
                    <button value="api_log_colo2_mysql2_Jan2015" onClick={this._postURL("api_log_colo2_mysql2_Jan2015")}>Jan2015</button>
                    <button value="api_log_colo2_mysql2_Aug2014" onClick={this._postURL("api_log_colo2_mysql2_Aug2014")}>Aug2014</button>
                    <button value="api_log_colo2_mysql2_Dec2014" onClick={this._postURL("api_log_colo2_mysql2_Dec2014")}>Dec2014</button>
                </form>
                <p>{this.state.logs}</p>
            </div>
        );          
    }
});

I was playing around with react for my first time and ran into some issues. I am creating 3 buttons with values and then executing a function when they're clicked that sends a post request and gets back data which is displayed to the user. For some reason, the _postURL function is being executed infinitely even when I dont click on the buttons. Does anyone know why?

var Test = React.createClass({
getInitialState: function(){

        return { logs: []};
    },
    _postURL: function(name){
        self = this;
        console.log(name);
        $.post("http://localhost:8080/DatabaseDemo/Display.do", {query: name})
            .done(function(data){
                console.log(data);
                self.setState({logs: data});
        });

    },
    render: function() {
        if(!this.state.logs){
            logs = <p>Choose a log</p>
        }
        return (
            <div>
                <form>
                    <button value="api_log_colo2_mysql2_Jan2015" onClick={this._postURL("api_log_colo2_mysql2_Jan2015")}>Jan2015</button>
                    <button value="api_log_colo2_mysql2_Aug2014" onClick={this._postURL("api_log_colo2_mysql2_Aug2014")}>Aug2014</button>
                    <button value="api_log_colo2_mysql2_Dec2014" onClick={this._postURL("api_log_colo2_mysql2_Dec2014")}>Dec2014</button>
                </form>
                <p>{this.state.logs}</p>
            </div>
        );          
    }
});

• javascript
• html
• reactjs

• 1 The onClick attribute expects a function but you are passing undefined. – elclanrs Commented Mar 16, 2015 at 4:33
• is this._postURL("api_log_colo2_mysql2_Dec2014") not a valid function? – user3716926 Commented Mar 16, 2015 at 4:35
• You are executing the function, then passing what the function returns, and it returns nothing, so undefined. Try this._postURL.bind(this, 'api_log...') – elclanrs Commented Mar 16, 2015 at 4:36

5 Answers 5

The onClick attribute expects a function but you are executing the function, which returns undefined. You can use bind:

onClick={this._postURL.bind(this, 'api_log...')}

Each of the onClick functions that you have defined are being called once the render is called. Once the function is called, it updates the state of the ponent, which fires the render again. That is why it happens indefinitely. Since jsx is really just javascript, the functions are being executed once they are evaluated. As elclanrs stated, you can use .bind() to have your function wait to be called until the button is clicked.

You are calling function in onClick={this._postURL("api_log_colo2_mysql2_Jan2015")}, which is called on render itself before clicking button. In that function setState is used resulting in constant rendering in loop.Try passing function reference only like onClick={() => {this._postURL("api_log_colo2_mysql2_Jan2015")}}

I know exactly this problem! You can solve it by just adding ()=> to onClick function.

I was facing the issue of the browser refreshing every time I was using a form and to prevent this you should add the prevent default handle.

e.preventDefault();

in my case the ponent was like:

import './Meme.css'
import data from './memesData.js'


let Meme=()=>{
    console.log(data)
    let handleClick=(e)=>{
        e.preventDefault();
        console.log("I was clicked")
    }

    return(
        <div className="meme">
        <form className="form">
        <input className="form--inputs" type="text" placeholder="Top Text" />
        <input className="form--inputs" type="text" placeholder="Bottom Text" />
        <button className="form--button" onClick={handleClick}>Get a new meme image </button>
        </form>

        </div>
    )
}

export default Meme;