[FIXED] How do I call a function inside another function through onclick in my React component?

Issue

I have a function component which has an outer() function containing the inner() function. The outer() function returns the inner() function. When rendering the DOM, I'm attaching an onClick handler which needs to fire the inner() function but I'm not able to access it. How do I target it?

My code looks like this:

function Main() {
   ....
   function outer() {
      ...
      function inner() {
      ...
      }
   return inner;
   }
return (
   <button onclick={?}></button>
}

Solution

<button onClick={() => outer()()}></button>

or

<button onClick={outer()}></button>

Answered By - Sachila Ranawaka
Answer Checked By - - Timothy Miller (ReactFix Admin)