title: How to access the method of other Function component functionality in different component in ReactJS
body: <p>I use the countdown timer reactjs package. I want to restart the timer in the winning and losing condition.</p>
  <p>That the winning and losing condition is in a different component and the timer functionality is in a different component.</p>
  <p>Nor winingcondition.js is parent to timer.js, Nor timer.js is parent to winingconditon.js</p>
  <p>timer.js</p>
  <pre><code>import { CountdownCircleTimer } from &quot;react-countdown-circle-timer&quot;;
  const renderTime = ({ remainingTime }) =&gt; {
      if (remainingTime === 0) {
          return &lt;div className=&quot;timer&quot;&gt;Too lale...&lt;/div&gt;;
      }
  
      return (
          &lt;div className=&quot;timer font-family flex flex--column align__items--center&quot;&gt;
              &lt;div className=&quot;value font-size--80 font text--white &quot;&gt;
                  {remainingTime}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  const CountDownTimer = (props) =&gt; {
      console.log(&quot;test&quot;);
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;div className=&quot;timer-wrapper flex justify__content--center bg-grad--timer b-radius--circle&quot;&gt;
                  &lt;CountdownCircleTimer
                      isPlaying
                      duration={30}
                      stroke={&quot;white&quot;}
                      colors={[&quot;#FFAD22&quot;, &quot;#FFFFFF&quot;, &quot;#FFFFFF;&quot;, &quot;#A30000&quot;]}
                      colorsTime={[25, 20, 15, 0]}
                      onComplete={() =&gt; {
                  
                          return { shouldRepeat: true, delay: 0 };
                      }}
                      onUpdate={() =&gt; {}}
                  &gt;
                      {renderTime}
                  &lt;/CountdownCircleTimer&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default CountDownTimer;
  </code></pre>
  <p>winingcondition.js</p>
  <pre><code>    const checkValidation = (isValidation, userAnswer) =&gt; {
          
          if (isValidation) {
              props.handleWinFunc();
              Swal.fire({
                  title: &quot;Good job!&quot;,
                  icon: &quot;success&quot;,
                  timer: 1000,
                  showConfirmButton: false,
                  backdrop: `
                      rgba(0,0,123,0.4)
                      url(&quot;https://acegif.com/wp-content/gif/confetti-12.gif&quot;)
                      top
                      no-repeat `,
              });
          } else {
              props.handleWinFunc();
              Swal.fire({
                  title: &quot;Wrong Answer&quot;,
                  html: `&lt;b&gt;Correct answer:${correctAns}&lt;/b&gt;`,
                  icon: &quot;error&quot;,
              });
          }
          setarrayValue([]);
      };
  </code></pre>