React Access parent component name

Question

I want to get the parent component name inside the child component to display a error message when validating properties of that child component. I'm creating a reusable component, so anyone can use my component inside their components. When they are using my component I want to display warning messages with the name of the parent component.

Is there a specific method to get parent name in react. Any kind of help would be appreciated.

score 12 · Answer 1 · edited Aug 10 '20 at 15:30

12

Children can see the context they are composed in through:

this._reactInternalInstance._currentElement._owner._instance.__proto__.constructor.name

For example:

import React, { Component } from 'react';

class Warning extends Component {
    render() {
        return (
            <div>{
                "WARNING: " + this._reactInternalInstance._currentElement._owner._instance.__proto__.constructor.name + " has an error."
            }</div>
        );
    }
}

export default Warning;

Do not believe this is parent-child communication. It is like standing in a room and seeing the containing walls from where you are. This is not the container (parent) communicating to you (child) but rather the child being context-aware.

Use this if you must, however, do note that it is part of React's internal instance and subject to change (do believe it is stable enough as of today).

edited Aug 10 '20 at 15:30

Timbergus

3,167
2
36
35

answered Jun 03 '16 at 09:52

Joshua Robinson

3,430
1
27
35

3

I'm not sure if this is necessarily better, but I'll post it here in case it helps someone out: `this._reactInternalInstance._currentElement._owner.getName()` – animatedgif Nov 01 '16 at 18:23
Just for notice: if you need to access to the parent component's name, it might will work only in the development stage, where your sources ain't got uglified via code compressors (ie. WebPack). – Arman Yeghiazaryan Jun 22 '18 at 12:39
2

And how to do it in the functional component? – Aniruddha Shevle Jun 30 '20 at 08:36

score 4 · Answer 2 · answered Mar 30 '22 at 23:34

I'm using React 18 with functional components, and ReactCurrentOwner was null for me. Instead, I used:

const stack = React["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"].ReactDebugCurrentFrame.getCurrentStack()

Inside my component render function (actually inside my custom hook), and it captured the complete stack trace of that component. Super useful for debugging what components triggered certain actions, since event handlers can reference the stack function-local var.

score 2 · Answer 3 · edited Aug 02 '19 at 04:16

2

you can get parent component from this._reactInternalFiber._debugOwner.type.name

edited Aug 02 '19 at 04:16

asliwinski

1,662
3
21
38

answered Mar 08 '19 at 11:49

Amit Chauhan

6,151
2
24
37

Can this way be used in prod? Is there any risk that the property will be lost? – liam xu Sep 27 '19 at 08:30
I wouldn't recommend using it in production as it's react's internal properties. – Amit Chauhan Sep 27 '19 at 08:51

score 0 · Answer 4 · answered Sep 04 '18 at 15:18

0

You can access the parent node of a component using:

this._reactInternalFiber.return.stateNode

answered Sep 04 '18 at 15:18

Sandeep Vattapparambil

124
1
10

score 0 · Answer 5 · answered Feb 25 '21 at 00:25

0

Using react@^17.0.1, this worked for me in debug mode:

const parentName = this._reactInternals?._debugOwner?.elementType?.name;

If you are using other version of react, you can try doing console.log(this) and navigate through the object until you find what you want.

answered Feb 25 '21 at 00:25

g-otn

293
4
9

2

This is a solution for class components – Marco Mesen Nov 24 '21 at 20:44

score 0 · Answer 6 · answered Feb 15 '22 at 04:15

If you are using Functional Components (in React 16+), you can access the parent this way:

React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.return.type

And you can keep going further in the nested object to hit each ancestor.

Note: Using props would of course be the proper approach. However, there might be some few debugging use-cases (or global plugin?) for doing this. For example, why-did-you-render uses this approach here.

React Access parent component name

6 Answers6

Linked