Access a nested grand child component in a parent component

Question

I need to access 'GreatGrandChild' component in the 'View' component.

View Component:

<View>
  <Child>
    ....
  </Child>
</View>

Child Component:

<Child>
  <GrandChild>
      ....      
    </GrandChild>
</Child>

GrandChild component:

<GrandChild>
  <GreatGrandChild>
    ....
  </GreatGrandChild>
</GrandChild>

GreatGrandChild component:

<GreatGrandChild ref={(component) => { this.component = component; }}>
  ....
</GreatGrandChild>

How do I access the 'GreatGrandChild' component in the 'View' component? Can I access it using refs? Which lifecycle method would be most appropriate in that case?

What is it you want to access? Its `state` or its DOM representation (i.e `ref`)? — Chris, May 31 '18 at 09:55

Tomasz Mularczyk · Accepted Answer · 2018-05-31T10:35:13.900

3

You can use a regular prop to pass your ref - but it must have a different name:

// somewhere in constructor
this.greatGrandChild = React.createRef();

<View>
  <Child greatGrandChildRef={this.greatGrandChild}>
    ....
  </Child>
</View>


<Child>
  <GrandChild greatGrandChildRef={this.props.greatGrandChildRef}>
      ....      
    </GrandChild>
</Child>


<GrandChild>
  <GreatGrandChild greatGrandChildRef={this.props.greatGrandChildRef}>
    ....
  </GreatGrandChild>
</GrandChild>

<GreatGrandChild ref={this.props.greatGrandChildRef}>
  ....
</GreatGrandChild>

This is very much the same idea of innerRef in styled-components and how they suggest it in React docs.

edited May 31 '18 at 10:35

answered May 31 '18 at 10:24

Tomasz Mularczyk

34,501
19
112
166

Hey Tomasz, what's the difference between this method and using React.forwardRef API? – Naser Mohd Baig Mar 13 '22 at 16:52
@NaserMohdBaig it's a solution from the time when forwardRef API was not available. – Tomasz Mularczyk Mar 14 '22 at 11:20
So you'd recommend using forwardRef instead of this approach? This actually is more straightforward for my use case :) – Naser Mohd Baig Mar 14 '22 at 13:24

score 0 · Answer 2 · answered May 31 '18 at 10:45

you can also emit from child to parent on each component and if you need to check something from view in the greatgrandchild, you can do like this:

_____in view :

methods: {

updateValue(valueFromDown){

//you have access to the value from greatgranchild, it is valueFromDown

...

},

<Child :valueToSend="valueToSend" @updateValue='updateValue'>
    ....
</Child>

______in the child :

props : [ 'valueToSend',...

methods:{

     updateValue(value){
        this.$emit('updateValue', value);
    }
  },

<GrandChild :valueToSend="valueToSend" @updateValue='updateValue'>
      ....      
</GrandChild>

_____in the granchild:

props : [ 'valueToSend', ...

methods:{

    updateValue(value){

        this.$emit('updateValue', value);
    }
  },

<GreatGrandChild :valueToSend="valueToSend" @updateValue='updateValue'>
      ....      
</GreatGrandChild>

_____and in the GreatGrandChild :

props : [ 'valueToSend',...

methods:{

checkTheValue(){

//check...

this.$emit( 'updateValue', valueFromDown); // i think it is your this.component

}

<GreatGrandChild ref={(component) => { this.component = component; }}>
  ....
</GreatGrandChild>

Access a nested grand child component in a parent component

View Component:

Child Component:

GrandChild component:

GreatGrandChild component:

2 Answers2

Linked