Breaking News: Grepper is joining You.com. Read the official announcement!

react call child function from parent

Add Answer

Pleasant Pigeon answered on December 4, 2022 Popularity 6/10 Helpfulness 2/10

answer react call child function from parent

related run child function from parent react

related call child component method from parent react

react call child function from parent

Comment

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    log() {
      console.log("child function");
    }
  }));

  return <h1>Child</h1>;
});

const Parent = () => {
  const ref = useRef();

  return (
    <div>
      <Child ref={ref} />
      <button onClick={() => ref.current.log()}>Click</button>
    </div>
  );
};

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: timmousk.com

Tags: call function javascript parent

Link to this answer
Share Copy Link

Contributed on May 05 2023

Pleasant Pigeon

0 Answers Avg Quality 2/10

Closely Related Answers

run child function from parent react

Comment

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const childRef = useRef(null);

  const runChildFunction = () => {
    if (childRef.current) {
      childRef.current.childFunction();
    } else {
      console.error("Child ref is not set.");
    }
  };

  return (
    <div>
      <button onClick={runChildFunction}>Run Child Function</button>
      <ChildComponent ref={childRef} />
    </div>
  );
};

export default ParentComponent;

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

call child component method from parent react

Comment

const { Component } = React;

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: call

Link to this answer
Share Copy Link

Contributed on Dec 04 2022

David Phurtseladze

0 Answers Avg Quality 2/10

react call child function from parent

Contents

More Related Answers

react call child function from parent

Closely Related Answers

run child function from parent react

call child component method from parent react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.