How to call multiple functions in if statement(Reactjs)-CodePudding

I have onClick event and I'm calling a function i.e handleFunc(). handleFunc() includes if statement with count value. If count value is 0 then i call function1(). If count value is 1 then it calls function1() and function2(). If count value is 2 the it calls function1 (), function2(), function3(). But based on count value when i call more then 1 function then it's not working i mean functions are not called.

Here is code I'm approaching

const function1 = () = {
// Block of code 
}

const function2 = () = {
// Block of code 
}


const function3 = () = {
// Block of code 
}

// A function invoke other functions

const handleFunc = ()=>  {
if( count === 0 )
{
function1()
}
if( count === 1 ){
function1 ();
function2();
}
if( count === 2 )
{
function1 ();
function2 ();
function3();
}

}

return (
<>

// button 
<button onClick={handleFunc ()}> Call function</button>

</>
)

My query is how to have multiple functions in if statement and on each click, call function one after another. Any suggestions please

CodePudding user response：

const handleFunc = () => [ fn1, fn2, fn3 ].slice(0, count   1).forEach((fn) => fn());

Slicing the ad-hoc array will select first 1, 2, or 3 functions, depending on count and then executing them. See the example below:

const fns = [
  () => console.log("I'm from 1st function"),
  () => console.log("I'm from 2nd function"),
  () => console.log("I'm from 3rd function"),
];
const count =  prompt("Count = ?");
fns.slice(0, count   1).forEach((fn) => fn());

CodePudding user response：

You had some issues with functions, I fixed those and added count as state, but you can get it from wherever you want, the idea will be same.

// Get a hook function
const {useState} = React;

const App = () => {
    const [count, setCount] = useState(0);
  const function1 = () => {
    // Block of code
  };

  const function2 = () => {
    // Block of code
  };

  const function3 = () => {
    // Block of code
  };

  const handleFunc = () => {
    if (count === 0) {
      console.log("function 1 called");
      function1();
    }
    if (count === 1) {
      console.log("function 1 and 2 called");
      function1();
      function2();
    }
    if (count === 2) {
      console.log("all functions called");
      function1();
      function2();
      function3();
    }
  };
  return (
    <div className="App">
      <button onClick={handleFunc}> Call function</button>
      <div style={{ marginTop: "20px" }}>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(count   1)}> </button>
        <p>{count}</p>
      </div>
    </div>
  );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

CodePudding user response：

is the count value updated?

is there any console error appear when the function are not called?