Call a method in a React component form another Component using Hooks

Question

I want to clear user's input data in a one component from button click event in another component. Component structure looks like bellow :

                         Search (contains Reset button)
                           |
                          Tabs
                           |
                   ------------------
                   |       |       |
                Student   Subject  Lecturer > (These components contains their own Rest fucntions)

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()).

How can I achieve this using ReactHooks ?

<Search> 
 <Tabs/>
<button type="button">Search</button>
<button type="button">Reset</button>
</Search>

Sample code look like below :

function Search() {
  
  return (
    <div className="App">
       <TabsComponent/>
      <button type="button">Search</button>
      <button type="button">Reset</button>
    </div>
  );
}

export default Search;

function TabsComponent() {
  
  return (
    <div >
       <Student/>
       <Subject/>
    </div>
  );
}

export default TabsComponent;

function Student() {
  
  return (
    <div >
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname">
    </div>
  );
}

export default Student;

what have you tried so far? you should post the code that you have for the relevant components in your diagram so we can help you — kennyvh, Jul 25 '20 at 03:52
I followed steps mentioned in this : https://stackoverflow.com/questions/37949981/call-child-method-from-parent I can not post the code due to company rules and regulations but I will post a sample — shalinds, Jul 25 '20 at 03:58
Did you try passing functions as props to the child? Did you try redux action concept ? — moshfiqrony, Jul 25 '20 at 04:35
We are not using Redux at the moment. Passing functions as props will work , but I have to pass them from Search > Tabs > Tab Content (Student, Subject ..etc) which bit difficult to maintain. Now I'm trying useCotext hook , lets see. — shalinds, Jul 25 '20 at 04:46
The react context API should help with the issue of prop drilling, and in a simple use-case such as this is probably preferred over the heavier and more boiler-platey react-redux or similar app-level state management. — Drew Reese, Jul 25 '20 at 05:15
Pass a prop "reseted" as false , change its value to true when reset button get clicked, subscribe the reseted prop inn your child component using useEffect, call a reset function inside use effect . Now either you can pass a changeSuccess function to parent so parent can change prop "reseted" as false again or you can apply a settimeout in your parent — vaibhavmaster, Jul 25 '20 at 05:16
@vaibhavmaster : Can you please explain the 'settimeout' approach ? — shalinds, Jul 26 '20 at 04:24

score 4 · Accepted Answer · answered Jul 25 '20 at 05:28

4

There's several ways to do it that are all valid, here's a CodeSandbox showing a fairly basic way just with useState and useEffect.

The idea is fairly simple. It just takes one state prop to pass down from Search to each of the three tab components, a boolean reset value. The rest is just adding useEffect to watch for changes in reset and responding accordingly.

Here's a working example:

answered Jul 25 '20 at 05:28

EvanMorrison

1,212
8
13

1

Thanks a lot for the working example EvanMorrison. It's very clear and easy to understand. (I'm totally new to front-end development and started React few days ago) – shalinds Jul 25 '20 at 06:36

Call a method in a React component form another Component using Hooks

1 Answers1