How do I call a method from another class component in React.js

Question

So I have to class components:
Class1: has a clickbutton
Class2: has a method calling my api

Basically, what I want is to call a method that sets and edits states inside one class from another class. But I keep failing.

Example:

Class1.js
export class Class1 extends Component {
   render() {
      return (
         <div onClick={must call Class2Method}></div>
      )
   }
}

Class2.js
export class Class2 extends Component {
   Class2Method(){
      Here I call my API, I set & call states, ...
   }
   render {
      return (
         <Class1 />
         Here I return my API content
      )    
   }   
}

What I tried:

I have tried to use my method and call and set my states in my App.js (parent of both class2 and class1); but then my Class2.js console says it can't find my states.
I also tried: < Class1 method={this.Class2Method} /> in my Class 2 and < div onClick={this.props.method} > in Class1.

You should refactor and take out your function which is calling the API and put it in some other Class. Then, import that Class in both the components and call the method. — Anand Undavia
– Anand Undavia, Commented Nov 27, 2018 at 12:15

Hemadri Dasari · Accepted Answer · 2018-11-27 12:29:05Z

13

Here you go

Class1.js

       export class Class1 extends Component {
             render() {
                return (
                    <div onClick={this.props.callApi}></div>
                )
            }
       }

Class2.js

Either bind callApi function in constructor or change it to arrow function.

Passdown callApi method to class1 component as a prop and access it in the above component as this.props.callApi and pass it to onClick of div.

 export class Class2 extends Component {
       callApi = () => {
           Here I call my API, I set & call states, ...
        }
       render {
           return (
              <Class1 callApi={this.callApi} />
                   Here I return my API content
            )    
       }   
   }

edited Nov 27, 2018 at 12:29

answered Nov 27, 2018 at 12:21

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

djamaile Over a year ago

<Class1 callApi={() => this.callApi()}/>

Hemadri Dasari Over a year ago

Peter it’s not mandatory but it’s good to have that when we want to prevent the event handler function gets called on every render and also when we want to pass parameters to the function. Correct me if I am wrong

djamaile Over a year ago

No, your understanding it right! But i thought it would be helpful.

Cédric Bloem Over a year ago

Oh my god this worked; thanks so much! Can someone explain me why it works with an arrow function but not with a basic method?

Hemadri Dasari Over a year ago

All event handler functions in component needs manual binding or Make them as arrow functions. Because binding is needed to access this context inside the function or arrow function has this context available

Luke Walker · Accepted Answer · 2018-11-27 13:02:51Z

How do i call a method from another class component in react.js

Using Props

"render prop" refers to a technique for sharing code between React components uising a prop whose value is a function" - reactjs.org

Example

app.js

import Button from '../../pathtoButton';
export class App extents Component {
    constructor(props){
        super(props)
        this.state = {
             name:'John'
        }
    }
    sayHello(){
        const { name } = this.message;
        alert(`Hello ${name}`}
    }
    render(){
        return (
             <div>
                 <Button
                     value="click me"
                     whenClicked={this.sayHello}
             </div>
        );
    }
}

button.js

export class Button extents Component {
    constructor(props){
        super(props)
        this.state = {
             style:{background:'red', color:'white'},
        }
    }
    render(){
        const { style } = this.state;
        const { whenClicked, value} = this.props;
        return (
             <div>
                 <button style={style} onClick={whenClicked}>{value}</button>
             </div>
        );
    }
}

Explanation

In app.js we imported the component <Button/> and using props we passed a method from app.js "sayHello" to a prop we created called whenClicked. In button.js we referenced this.props.whenClicked and passed it to the onClick property.

sayHello is now being shared between the two components because we passed the method as a prop to the <Button/> component.

Mateus Silva · Accepted Answer · 2018-11-27 12:33:54Z

0

First: Consider to use Stateless Functional Components instead of Stateful Components in cases like your "Class1" that don't use states, only props.

Now, to do what you need.. just pass your methods as a prop, something like this:

export class Class1 extends Component {
   render() {
      return (
         <div onClick={this.props.getData()}>Click to Call API</div>
      );
   }
}

export class Class2 extends Component {
   state = {
    data: null,
   };
   
   callApi = () => {
      // Get API data
      const data = {
        hello: 'world',
      };
      
      this.setState({ data });
   }
   
   render {
      return (
         <Class1 getData={this.callApi} />
         {JSON.stringify(this.state.data)}
      )    
   }   
}

answered Nov 27, 2018 at 12:33

Mateus Silva

1

1 Comment

Cédric Bloem Over a year ago

The solution of Hemadri Dasari did the trick; but your comment about 'Consider to use Stateless Functional Components instead of...' has caught my attention. I'm gonna take a look at that article and try to understand how this could help me to avoid future problems

Collectives™ on Stack Overflow

How do I call a method from another class component in React.js

Example:

What I tried:

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example:

What I tried:

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related