title: How to call function in different component
body: <p>I have a problem with calling a function. This function is in main <strong>App.js</strong> file and it's passed to different component as a prop. I need this function to get called if form validation returns true but my code doesn't work.</p>
  <p><strong>Function in App.js</strong></p>
  <pre><code>  function getAlarm() {
      let message = document.getElementById(&quot;text&quot;).value;
      let hour = document.getElementById(&quot;hours&quot;).value;
      let minute = document.getElementById(&quot;minutes&quot;).value;
  
      //Add id to alarm
      let id;
      
      if(time.alarms.length &gt; 0 ){
        id = Math.max(...time.alarms.map((alarm) =&gt; alarm.id)) + 1
      }else{
        id = 1;
      }
  
      //Create new alarm object
      const newAlarm = {
        id: id,
        message: message,
        hour: hour,
        minute: minute
      };
  </code></pre>
  <p><strong>Passed to component as a prop</strong></p>
  <pre><code>&lt;SetAlarm getInfo={getAlarm} /&gt;
  </code></pre>
  <p>In this component I have little form ,which have some validation. For better understanding I'll show you form and these functions too.</p>
  <p><strong>Form</strong></p>
  <pre><code>&lt;form onSubmit={validateForm}&gt;
      &lt;FontAwesomeIcon 
        icon={faTimesCircle} 
        className=&quot;closeIcon&quot;
        onClick={() =&gt; setAlarm(false)} /&gt;
  
      &lt;h3&gt;Please set your alarm&lt;/h3&gt;
  
      &lt;label htmlFor=&quot;text&quot;&gt;Message&lt;/label&gt;
      &lt;input type=&quot;text&quot; id=&quot;text&quot; autoComplete=&quot;off&quot; autoFocus=&quot;on&quot; /&gt;
  
      &lt;div className=&quot;flex&quot;&gt;
        &lt;div className=&quot;inputNumber&quot;&gt;
           &lt;label htmlFor=&quot;hours&quot;&gt;Hour&lt;/label&gt;
           &lt;input type=&quot;number&quot; id=&quot;hours&quot; value={validate.hours} onChange={updateHours} /&gt;
           &lt;div id=&quot;errHours&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
                              
        &lt;div className=&quot;inputNumber&quot;&gt;
           &lt;label htmlFor=&quot;minutes&quot;&gt;Minute&lt;/label&gt;
           &lt;input type=&quot;number&quot; id=&quot;minutes&quot; onChange={updateMinutes} /&gt;
           &lt;div id=&quot;errMinutes&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button onClick={validateForm}&gt;SET ALARM&lt;/button&gt;
   &lt;/form&gt;
  </code></pre>
  <p>Input elements have <strong>onChange</strong> function which is sending it's value to state. Depending on this value validation signal will show up. (I mean if condition returns false, red border will show up,or warning under input)</p>
  <pre><code>const [validate,setValidate] = useState({
      message:'',
      hours:'',
      minutes:''
  })
  
  function updateHours(e){
      let value = e.target.value;
      let hours = document.getElementById('hours');
      let errHours = document.getElementById('errHours');
  
      setValidate(prevState =&gt; ({
          ...prevState,
         hours:value
      }))
  
      if(Number(hours.value) &gt; 23){
          hours.style.border='1.5px solid red';
          errHours.innerHTML='&lt;span&gt;Please enter 1-23&lt;/span&gt;'
      }else{
          hours.style.border='1px solid grey'
          errHours.innerHTML='';
      }
  }
  
  function updateMinutes(e){
      let value = e.target.value;
      let minutes = document.getElementById('minutes');
      let errMinutes = document.getElementById('errMinutes');
  
      setValidate(prevState =&gt; ({
          ...prevState,
          minutes:value
      }))
  
      if(Number(minutes.value) &gt; 59){
          minutes.style.border='1.5px solid red';
          errMinutes.innerHTML='&lt;span&gt;Please enter 1-59&lt;/span&gt;';
      }else{
          minutes.style.border='1.5px solid grey';
          errMinutes.innerHTML='';
      }
  }
  </code></pre>
  <p>And finally <strong>validateForm()</strong> function. As you can see it's called on form <strong>onSubmit</strong>. It's supposed to check if values of state meet the condition. If condition returns false,you are not able to submit this form ,so no alarm will be added. But if condition returns true ,i want to call that function which I'm sendind as a prop.</p>
  <pre><code>function validateForm(e){
      e.preventDefault();
      if(Number(validate.hours) &gt; 23 || Number(validate.hours) &lt; 1){
          return;
      }
  
      if(Number(validate.minutes) &gt; 59 || Number(validate.minutes) &lt; 1){
          return;
      }
  
      //This is not working. If all conditions returns true, nothing happens.
      return () =&gt; props.getInfo;
  
      //I tried it like this too
      // return props.getInfo();
  
      //Or like this;
      //return props.getInfo;
  
      //To be sure it's working I've tried simple console log and it's working
      //return console.log('hello');
  }
  </code></pre>
  <p>According to my last try with that console log, I assume I'm just not calling this function properly. Sorry for that long question and code examples,but I wanted to be sure everyone will get what I'm talking about. Thanks :)</p>