4

I have two react components the child component uses Apollo client for GraphQL which wraps the child component as higher order component. I want to access the child class method using reference to execute child method in parent class but when I use ref I get Graphql object instead of react child component. My code sample looks like this.

Note:
this question is not a duplicate of
React js change child component's state from parent component
OR
Access child state of child from parent component in react
Because
They don't use GraphQL Apollo Client)

Parent Component 

import React, {Component} from 'react';

import "./Child";
class Parent extends Component{
    state={

    };
    executeSomeChildFunction = () =>{
        /* console.log(this.myChild); */
        this.myChild.childFunction();
    };
    render(){
        return(
            <div>
                <button onclick={this.executeSomeChildFunction}>
                     Click To Execute Child Function
                </button>
                <Child ref={el=> this.myChild =el} />
            </div>
        );
    };
}

export default Parent;

Child Component 

import React, {Component} from 'react';

const myQuery = `query DriversQuery() {
    drivers: { 
        edges{ 
           node{ 
                   id 
                   pk 
                   firstName 
                   lastName 
               }
         }
       }
    }`;

class Child extends Component{
    state={

    };
    childFunction = () => {
        alert("I am a child function");
    };
    render(){
        return(
            <div>Replace this div with your code!</div>
        );
    };
}

export default gql(myQuery, {/*some options*/})(Child);

What I Get as Output When I console.log(this.myChild); I get a graphql object like this.
Output

Expected Output
I want to get Child Element Reference. So that When I console.log(this.myChild); I should get Child component object.

root
  • 518
  • 4
  • 20
  • 1
    why do you want to do this? – azium Aug 18 '18 at 06:00
  • what you're trying to do is a major antipattern in react. there's a section in the docs on how to do this properly https://reactjs.org/docs/lifting-state-up.html – azium Aug 18 '18 at 06:02
  • 1
    I have stated this in my question **Why I want to do this???** I want to execute child class method inside parent component. – root Aug 18 '18 at 06:03
  • 1
    I'm asking **Why do you want to execute a child class method inside a parent component?** – azium Aug 18 '18 at 06:04
  • Because whatever your answer may be, it is the incorrect way of doing whatever it is you *actually* want to do. But if you tell us why, we can give you specific instructions on how to achieve what you want the correct way. Parents should never be aware of the methods or state written on children. – azium Aug 18 '18 at 06:05
  • 1
    Because I want to make request for parrent data update inside child component method. and also another component method that is present in Parrent only and child have no access to it. Simple : A -> B, C -> I want B's method to Update C without having access to C. – root Aug 18 '18 at 06:09
  • 1
    why would the child not have access to it? pass the function down using `props` – azium Aug 18 '18 at 06:10
  • 1
    @azium I'm sorry if the question is not understandable. I'm not a native English speaker. And if you think the question is good please don't forget to vote-up and help me stand out in this community. – root Aug 18 '18 at 06:10
  • @azium in order to pass c's function I'll have to access the C's component method and to do that I have the same problem. – root Aug 18 '18 at 06:12
  • 1
    the question itself is fine, but it's the classic version of an XY problem https://en.wikipedia.org/wiki/XY_problem . you're asking how to write a BAD solution to a problem that you have, that many people have, that has a GOOD solution that does not involve parents calling child methods. it breaks the entire concept of react – azium Aug 18 '18 at 06:12
  • here's a golden rule to follow. put all the methods and state on A. then just pass props down. it will work and it will be simple – azium Aug 18 '18 at 06:15
  • @azium I might be wrong. But is there way to access the child component which uses the graphql as higher order component because I'm getting the GraphQL object. How can I get React Child Object from this? – root Aug 18 '18 at 06:15
  • 1
    in react you never access child components... that's why you're getting confused – azium Aug 18 '18 at 06:16
  • 1
    you can only access things passed from parent to child, using props.. that's it – azium Aug 18 '18 at 06:16
  • Thank you my fried. @azium. I'm using Material UI and that's very confusing for me because in Material UI we have something that is called Table Toolbar. I want to change the parrent element when table row is selected. My table row is a seprate component and parrent is a seprate component. I want to do something in parent when table row is selected. How can I acheive this if i don't get this working? The question above is a sample code of my version. – root Aug 18 '18 at 06:18
  • 1
    pass a function that updates state from parent to child. the link in my second comment explains everything – azium Aug 18 '18 at 06:19
  • Thank you so much @azium You made my day. – root Aug 18 '18 at 06:20
  • You can write answer for that I'll accept that answer. It'll give you some good points. – root Aug 18 '18 at 06:21
  • 1
    my answer is simply "do not do this". feel free to write another question if you get stuck again – azium Aug 18 '18 at 06:22
  • @azium your answer is perfect. :) Thank you so much friend. – root Aug 18 '18 at 06:23
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178241/discussion-between-root-and-azium). – root Aug 18 '18 at 06:34

0 Answers0