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>
);
}
});
Share
Improve this question
asked Mar 16, 2015 at 4:31
user3716926user3716926
451 gold badge1 silver badge7 bronze badges
3
-
1
The
onClick
attribute expects a function but you are passingundefined
. – 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
. Trythis._postURL.bind(this, 'api_log...')
– elclanrs Commented Mar 16, 2015 at 4:36
5 Answers
Reset to default 2The 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;