I'm running into an error on a React project. I just want to call multiple functions on a onClick event. Right now I'm rendering this in a component:
render()
{
let more;
if (this.pageCounter > 0 && this.pageCounter < 4) // il button more per far vedere più stats non va renderizzato oltre la terza pagina, perché l'API non ci arriva.
more = <button id="More" onClick={ this.loadNextPage }>More...</button>;
if (this.pageCounter == 0)
{
more = null;
this.pageCounter++;
}
if (this.pageCounter >= 4)
more = null;
return (
<div>
<div>
<form className="PlayerSearch" onSubmit={(event) => { event.preventDefault(); } }>
<label htmlFor="gamertag">Xbox Live Gamertag:</label>
<input type="search" id="search-recent-matches" name="Gamertag" placeholder="Enter a Gamertag..."></input>
<button type="submit" onClick={() => { this.initializeVariablesAndCounters; this.fetchHaloMatches; }} >Search</button>
</form>
</div>
<MatchTable recentMatches={ this.data }/>
{ more }
</div>
);
}
Inside the return statement, I returned a div with a button and I set the event handler:
<button type="submit" onClick={() => { this.initializeVariablesAndCounters; this.fetchHaloMatches; }} >Search</button>
When I run the code, it seems to initally load fine, but as soon as the browser renders the form and thus the button, I get:
Line 140:64: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 140:101: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 140 refers to that submit button , so there must be something wrong in that onClick, yet I can't figure what; the last version with just one function call worked perfectly:
<button type="submit" onClick={ this.fetchHaloMatches } >Search</button>
But now I have the need to call two functions when the event triggers. I figured out I had to use a arrow function, but as I mentioned, something's wrong with my code:
<button type="submit" onClick={() => { this.initializeVariablesAndCounters; this.fetchHaloMatches; }} >Search</button>
You need to actually call your functions:
<button
type="submit"
onClick={() => {
this.initializeVariablesAndCounters();
this.fetchHaloMatches();
}}
>
Search
</button>;
Just writing the function name references it; you have to actually call it for it to execute.
When passing a function as a prop in React, you are effectively replacing the onClick function with your own, which will be called inside the component receiving it as a prop. However, when passing multiple functions, you are actually making use of a callback function (() => {}), which is the thing being passed. The inner functions still have to be called whenever that callback function is activated.
Basically, this:
<button
type="submit"
onClick={() => {
this.initializeVariablesAndCounters();
this.fetchHaloMatches();
}}
>
Search
</button>;
is the same as this:
const myCallbackFunction = () => {
this.initializeVariablesAndCounters();
this.fetchHaloMatches();
};
<button type="submit" onClick={this.myCallbackFunction}>
Search
</button>;