title: Call a method in a React component form another Component using Hooks
body: <p>I want to clear user's input data in a one component from button click event in another component.
  Component structure looks like bellow :</p>
  <pre><code>                         Search (contains Reset button)
                             |
                            Tabs
                             |
                     ------------------
                     |       |       |
                  Student   Subject  Lecturer &gt; (These components contains their own Rest fucntions)
  </code></pre>
  <p>HTML elements in the selected tab should clear data when Reset button is clicked. Each tab component(Student, Subject, Lecturer) contains related UseStates and Reset function(ResetStudent(), ResetSubject()).</p>
  <p>How can I achieve this using ReactHooks ?</p>
  <pre><code>&lt;Search&gt; 
   &lt;Tabs/&gt;
  &lt;button type=&quot;button&quot;&gt;Search&lt;/button&gt;
  &lt;button type=&quot;button&quot;&gt;Reset&lt;/button&gt;
  &lt;/Search&gt;
  </code></pre>
  <p>Sample code look like below :</p>
  <pre><code>function Search() {
    
    return (
      &lt;div className=&quot;App&quot;&gt;
         &lt;TabsComponent/&gt;
        &lt;button type=&quot;button&quot;&gt;Search&lt;/button&gt;
        &lt;button type=&quot;button&quot;&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Search;
  </code></pre>
  <pre><code>function TabsComponent() {
    
    return (
      &lt;div &gt;
         &lt;Student/&gt;
         &lt;Subject/&gt;
      &lt;/div&gt;
    );
  }
  
  export default TabsComponent;
  </code></pre>
  <pre><code>function Student() {
    
    return (
      &lt;div &gt;
          &lt;label for=&quot;fname&quot;&gt;First name:&lt;/label&gt;
          &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot;&gt;
      &lt;/div&gt;
    );
  }
  
  export default Student;
  </code></pre>