0

Below is the code for my child functional component and parent functional component. The child component uses a library which gives me the reset function but the event where I need to call that reset function is in the parent component. Is their a way to call the child component function from parent component? I would appreciate if some one helps me with this.

    

import React from 'react';
    export default function MyChildFunction() {
      const {
        Test
        reset,
      }
      return (
        <div style={{textAlign: 'center'}}>
          <div style={{fontSize: '30px', color : 'white'}}>
            <span>{Test}</span>:<span>{Test}</span>:<span>{Test}</span>
          </div>
        </div>    
      );
      function handleReset() {
          {reset()};
      }
    }

    export default function NavBar({
      return (
      <div>
                    <MyChildFunction/>
                    </div>
    )
    }

    import NavBar from "./components/NavBar";
            function App() {
            const changeUserState = (State) => {
                alert(State);
                MyChildFunction.handleReset(); -- here i want to have the function called.
                setState(State);
              };
        return (
            <>
         <NavBar/>
        </>
          );
            }
IntelligentCancer
  • 59
  • 1
  • 1
  • 15
  • Look into the useImperativeHandle hook. – AKX Oct 12 '21 at 16:55
  • Thanks, @AKX . Can you share an example may be all examples i have seen requires an onclick from the child component also it requires forwardRef and that's not the case with my child component. Sorry im new to react. – IntelligentCancer Oct 12 '21 at 16:57
  • You can visit this https://stackoverflow.com/questions/37949981/call-child-method-from-parent – saurav Oct 12 '21 at 17:01
  • Does this answer your question? [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) – Giorgi Moniava Oct 12 '21 at 17:09
  • @saurav - i have edited my question, the reason your suggestions won't work in my case is my child component and the parent (app.jsx) has another component in between. – IntelligentCancer Oct 12 '21 at 17:12
  • What's the actual library that has that component with the `reset` function? Chances are you might not need the reset function if you can remount that component (e.g. by changing its `key`). – AKX Oct 12 '21 at 17:24
  • @AKX - its "react-timer-hook" there is a timer in my component that i need to refresh on state change from the parent component. – IntelligentCancer Oct 12 '21 at 17:25

1 Answers1

0

I created a singleton class and subscribe my function to a listener function and created instance of that class in my parent component to call method of the child component from there.

IntelligentCancer
  • 59
  • 1
  • 1
  • 15
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 29 '21 at 13:20