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

call child component method from parent react

David Phurtseladze answered on December 4, 2022 Popularity 10/10 Helpfulness 3/10

answer call child component method from parent react

related run child function from parent react

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 javascript parent

Link to this answer
Share Copy Link

Contributed on Dec 04 2022

David Phurtseladze

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

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

call child component method from parent react

Contents

More Related Answers

call child component method from parent react

Closely Related Answers

run child function from parent react

Grepper

Documentation

Social

Legal

Contact

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