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

Here you go

Class1.js

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

Class2.js

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

2. 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            )           }      }

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.

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)}      )       }   }