CODEWITHSUNDEEP
javascriptreactjs
Bobek
Bobek

Reputation: 757

Access method from child to child

I know how to call child method from parent class. But now, when I want to call a child method from another child I have a problem.

How do I call testMethod() declared in UserAuthenticationRequests class from UserAuthenticationUI class? It is possible to call testMethod() from App class without problems.

(I dont need to call it from App class just for example)

Parent class

import React from 'react';
import UserAuthenticationUI from './UserAuthentication/UserAuthenticationUI';
import UserAuthenticationRequests from './UserAuthentication/UserAuthenticationRequests';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.userAuthenticationUI = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

componentDidMount(){
    this.userAuthenticationRequests.current.testMethod(); //there i can call method without problems
}

render(){
    return(
        <div>
            <UserAuthenticationUI ref={this.userAuthenticationUI} />
            <UserAuthenticationRequests ref={this.userAuthenticationRequests} />
        <div>
    )}
}
export default App;

1. child where i want to call 2.child method

import React from "react";
import App from '../App';
import UserAuthenticationRequests from './UserAuthenticationRequests';

class UserAuthenticationUI extends React.Component {
    constructor(props){
        super(props);

        this.app = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

    componentDidMount() {

        this.userAuthenticationRequests.current.testMethod(); //there i can not call
    }

    render(){    
        return(
            <div>
                <App/>
                <UserAuthenticationRequests ref={this.userAuthenticationRequests} />              
            </div>
        )}
    }

    export default UserAuthenticationUI;

Got this error 

TypeError: Cannot read property 'testMethod' of null

3. class which is called from parent and 2. child 

  class UserAuthenticationRequests extends React.Component {
      testMethod(){
         console.log("test method")
      }

      render(){
          return(<div></div>)
      }
  }
  export default UserAuthenticationRequests;

Upvotes: 0

Views: 62

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281874

When multiple siblings components want to use the same method or properties, its advisable to lift that state or method up. Also you must use refs in as few cases as possible. In your case you would write it like

App

class App extends React.Component {
    constructor(props) {
        super(props);

        this.userAuthenticationUI = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

componentDidMount(){
    this.testMethod(); 
}

testMethod(){
     console.log("test method")
}
render(){
    return(
        <div>
            <UserAuthenticationUI testMethod={this.testMethod} ref={this.userAuthenticationUI} />
            <UserAuthenticationRequests testMethod={this.testMethod} ref={this.userAuthenticationRequests} />
        <div>
    )}
}
export default App;

UserAuthenticationRequests

  class UserAuthenticationRequests extends React.Component {
      render(){
          return(<div></div>)
      }
  }
  export default UserAuthenticationRequests;

UserAuthenticationUI

class UserAuthenticationUI extends React.Component {
    constructor(props){
        super(props);

        this.app = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

    componentDidMount() {

        this.props.testMethod(); 
    }

    render(){    
        return(
            <div>
                <App/>
                <UserAuthenticationRequests ref={this.userAuthenticationRequests} />              
            </div>
        )}
    }

    export default UserAuthenticationUI;

Upvotes: 1

Related Questions