Call functions again onClick in React

Question

I work on React Project and have a some functions which defines some conditions when render the components on page, but I need to call to all functions again in components when onClick button and render random numbers.

example:

export default function App(){

func1(){
 // some func
//brings random number
}

func2(){
 // some func
//brings random number
}

func3(){
 // some func
//brings random number
}

const definedOne = func1();
const definedTwo = func2();
const defineTree = func3();

return(
 <div>{definedOne}<div>
 <div>{definedTwo}<div>
 <div>{definedTree}<div>
<button onClick={// what need to click?}>Run Functions Again</button>
)

}

Answer 1

You code for React is incomplete. TO get a button to work, you need code such as this:

<Button
   variant="outline-secondary"
   id="button-addon2"
   disabled={email === ''}
   onClick={() => sendReport()}>
   Send report
 </Button>

Now this will calls a function named sendReport(). For example:

const sendReport = async () => { service.mailItem(email).catch((e) => {setError(e.message)}); }

Your code has no onClick() method.

Answer 2

Your three numbers need to be moved to state , which enables you to update them on click.

Use a handleClick function to update the three state variables.

export default function App(){

func1(){
 // some func
//brings random number
}

func2(){
 // some func
//brings random number
}

func3(){
 // some func
//brings random number
}

handleClick(){
  setDefinedOne(func1());
  setDefinedTwo(func2());
  setDefinedThree(func3());
}

const [definedOne, setDefinedOne] = useState(func1());
const [definedTwo, setDefinedTwo] = useState(func2());
const [definedThree, setDefinedThree] = useState(func3());

return(
 <div>{definedOne}<div>
 <div>{definedTwo}<div>
 <div>{definedTree}<div>
<button onClick={handleClick}>Run Functions Again</button>
)

}

Answer 3

onClick function can be used like this :

onClick = {handleClickFn}

or

onClick = {(e) => handleClickFn(e)}

Both works fine.

export default function App(){

   const handleClickFn = (e) => {
      console.log("You clicked button");

      func1();
      func2();
      func3();
   }

   func1(){
     // some func
     //brings random number
   }

   func2(){
      // some func
      //brings random number
   }

   func3(){
      // some func
      //brings random number
    }

   const definedOne = func1();
   const definedTwo = func2();
   const defineTree = func3();

   return(
      <div>{definedOne}<div>
      <div>{definedTwo}<div>
      <div>{definedTree}<div>
      <button onClick={handleClickFn}>Run Functions Again</button>
   )

}

Answer 4

If you want to update your values, you have to cause a render by updating a state, maybe be doing this way

export default function App(){

func1(){
 // some func
//brings random number
}

func2(){
 // some func
//brings random number
}

func3(){
 // some func
//brings random number
}

const obj = () => ({
    definedOne: func1(),
    definedTwo: func2(),
    definedThree: func3()
})

const [state, setState] = useState(obj())

return(
 <div>{state.definedOne}<div>
 <div>{state.definedTwo}<div>
 <div>{state.definedTree}<div>
<button onClick={() => {
    setState({...obj()})
}}>Run Functions Again</button>
)

}