Is there a better way to call a child function from a parent component in React, other than this?

Teohan Eksi

I tried to call a function in a child component from a parent component in React, but without the use of refs, and i succeeded but i don't know if my way is something other than a cheap hack. What can be a better way to do this?

I'm also reading the docs but i may have missed the right way. Any resource suggestion and idea is appreciated.

My parent code:

function Parent(props){ 
  const [submitClicked, setSubmitClicked] = useState(false);
  function onSubmitClick(e){
    e.preventDefault();
    setSubmitClicked(true);
  }

  return (
    <Child 
      submitClicked={submitClicked}
      setSubmitClicked={setSubmitClicked}
    />
  );
}

Child code:

function Child(props) {
  useEffect(()=>{
    if(props.submitClicked){

      //do something in the child component...

      props.setSubmitClicked(false);
    }
  });
}
Andy

Pass down a handler (a function) to the child component from the parent that deals with the state updates.

const { useState } = React;

// Child receives the handler
// When the button is clicked call the handler
function Child({ handleSubmit }) {
  return <button onClick={handleSubmit}>Click me</button>
}

function Parent() {

  const [ submitClicked, setSubmitClicked ] = useState(0);

  // The handler deals with the state update
  function handleSubmit() {
    setSubmitClicked(submitClicked + 1);
  }

  return (
    <div>
      <p>{submitClicked}</p>
      <Child handleSubmit={handleSubmit} />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Parent />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Unable to call parent component function from child component in React

How to have a React child component call a function from a parent component

How to call React/Typescript child component function from parent component?

How can I call Child function from Parent Component in React

Call a parent component function from a child component

Any better way to pass data from a child component to a function in a parent component without using bind()?

Call child component function from parent

How to Call child function from parent component in React Native functional component?

How to call function in parent class component by onchange event from child component in React?

Call a function in React from child component

How to call child component's method from a parent component in React

Call a method pass from parent component to child component in React

Call a child component function from parent component in Angular 1.5

angular 4 - call child component function from parent component html

Call a parent component function from a child component in Angular

React call a function from other component

how to call function of child in functional component from parent in react.js?

How do you call a parent function from a child component (with parameters) in react-native?

call child methods from parent of a component rendered using a map function in react native

React - call function in child component if parent state changes

Trigger a function from child component and define in parent component in React Native

Pass callback function from parent component to child component react

How to call a child component method from parent in React Native typescript

Call a function in imported child component on click from a parent element?

Unable to call child function from parent using refs with functional component

Render child component or call child component's method from parent component and vice versa[React Native]

Is there a way to control the child component function by parent component?

passing data from child to parent component - react - via callback function

React - How to send a custom function from a child to parent component