Change the handler to avoid click pressed twice requirement – React

I have in my project the following handler:

let  btnHandler = () => {
      if (date1 && date2) {
      refetchAll(events.options.all.variables);console.log("win-win");
      console.log(date1,date2);
}}

I want to modify this code (no need second braces), so it will do the same, but will require only one button click:

let  btnHandler = () => 
      if (date1 && date2) {
      refetchAll(events.options.all.variables);console.log("win-win");
      console.log(date1,date2);
}

The problem, that I don’t know how to do it. In current state this handler requires from me a twice press click on Button to get an effect, result and data. I have a table which reads data from GraphQl, and in above handler I send a refresh instruction. I need to press twice, So React will update table. If I will change the code to no braces – It gives me error:

./src/components/modules/reports/Reports.js
  Line 366:4:  Parsing error: Unexpected token

  364 |
  365 | let  btnHandler = () =>
> 366 |           if (date1 && date2) {
      |           ^
  367 |           refetchAll(events.options.all.variables);console.log("win-win");
  368 |           console.log(date1,date2);
  369 | }

I’ve tried:

let  btnHandler = () =>
      refetchAll(events.options.all.variables)|setmyVar|SetState|action1|action2;
      console.log(date1,date2);
}

But this doesn’t work. I do not understand what is doing arrow function, and why arrow function works immediately and prefect. But how to link to one button click multiple actions? Other ideas what I thinked about are: promises, await, useContext. I am novice in js and React (just 2-3 month hardly working).

Upd, my Button code:

<Button onClick={btnHandler}>Search</Button> - need pressed twice
<Button onClick={() => refetchAll(events.options.all.variables)}>Search</Button> // Works fine! Only one time press requires.

But in – <Button onClick={() => refetchAll(events.options.all.variables)}>Search</Button> //I need to add more instruction. Like:

<Button onClick={() => refetchAll(events.options.all.variables)|SetMystate|Dosometh1|Dosomething2}>Search</Button>

5 thoughts on “Change the handler to avoid click pressed twice requirement – React”

  1. it seems like You are missing { } character after the declaration of function btnHandler, just add that character:

    let btnHandler = () => {
      if (date1 && date2) {
        refetchAll(events.options.all.variables);
        console.log("win-win");
        console.log(date1, date2);
      }
    }
    
    

    this is how to link to one button click multiple actions

    import React from ‘react’;

    // Example
    
    function App() {
    
      function greeting() {
        console.log('hello!');
        waveHello();
      }
    
      function waveHello() {
        console.log('👋');
      }
    
      return (
        <div>
          <button
            onClick={greeting}>
            I'm a button
          </button>
        </div>
      );
    }
    
    export default App;
    
    Reply

Leave a Comment