Call Method That Inside Another Component - React Js

ReactJS - Call One Component Method From Another Component

You can do something like this

import React from 'react';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

Using statics

var MyComponent = React.createClass({
 statics: {
 customMethod: function(foo) {
  return foo === 'bar';
  }
 },
   render: function() {
 }
});

MyComponent.customMethod('bar');  // true

How to call a function from another class in React-Native?

You have two options, either to use an object or use class name, let's start with object

class B {
  abc() {
    alert("Hello World");
  }
}
const b = new B();
export default b;

So when you call this file you can access the function abc like the following

import b from './B.js';
class A extends Component {
    _onItemPressed(item){
        b.abc();
    }
...

The other way is to use class instead as follow

class B{}
B.abc = function(){
    alert("Hello World");
}
module.exports = {
  functions: B
};

So when you call this file you can access the function abc like the following

import b from './B.js';
class A extends Component {
    _onItemPressed(item){
        b.functions.abc();
    }
...

Note: B class should not be a component, you can use it as a helper class.

also, you can enhance the way you deal with the object using singleton pattern as I already mention in
React native- Best way to create singleton pattern

UPDATE: If you insist to use component instead of a class function, you can call it through reference, as follows:

export default class B extends Component {
  constructor(props) {
    super(props);
    this.abc = this.abc.bind(this);
   }
    abc(){
      alert('Hello World');
    }

    render() {
      return null
    }
}

now in A component you can call B by reference

import B from "./B.js";
class A extends Component {
  _onItemPressed(item) {
    this._b.abc();
  }
  render() {
    return (
      <TouchableHighlight
        underlayColor={Colors.colors.lightgrey}
        style={{ padding: 15 }}
        onPress={this._onItemPressed.bind(this)}
      >
        <Text>Click Me !</Text>
        <B ref={ref => (this._b = ref)} />
      </TouchableHighlight>
    );
  }
}

Call Method that inside Another Component - React Js

The recommended way of doing that kind of things is by composing components and passing the parent's states as props

class General extends Component {
  state = { ... }

  render () {
    return (
      <Car {...this.state} />
    )
  }
}

class Car extends Component {
  render () {
    console.log(this.props)
    return (...)
  }
}

Now if you want to share a global state between components could be a good idea to use context api with hooks.

import React, { createContext, useContext } from "react";
import ReactDom from "react-dom";

const initialState = { sharedValue: "Simple is better" };
const StateContext = createContext({});

const General = () => {
  const globalState = useContext(StateContext);
  return <h1>General: {globalState.sharedValue}</h1>;
};

const Car = () => {
  const globalState = useContext(StateContext);
  return <h1>Car: {globalState.sharedValue}</h1>;
};

const App = () => {
  return (
    <StateContext.Provider value={initialState}>
      <General />
      <Car />
    </StateContext.Provider>
  );
};

ReactDom.render(
  <App />,
  document.getElementById("root")
);

Here is the example link.

And here I have a repo with a more elaborated example managing global state with just hooks.

React.js: Call functions from another component?

Pass in your parent method as a prop of your child component. Your Map component should have props as part of the constructor, and then call your function on your children component by taking the function passed by the prop.

// parentComponent.jsx

  // something here ...
  render() {
    return (
      <div><ChildComponent onClick={this.onWhatever} /></div>
    )
  }

// childComponent.jsx

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
      his.onSomething = this.onSomething.bind(this);
  }
      
  onSomething = () => {
    const {onClick} = this.props;
    onClick();
  }
  // other things here ...
}

I'd recommend using React Hooks since your child component returns a functional component anyway. I'd not bother dealing with Redux unless you have a proper understanding on React (even if it is a nice-to-haves when you're sharing state for multiple things).

ReactJs : Call method from another component having no relation (parent-child)

You want sibling components to communicate. You may want to look at this answer: https://stackoverflow.com/a/36144048/1065780

The idea is either to use state managers like redux, or to make your parent component receive events from one sibling and pass changed props to another sibling, like this:

function AppLanding() {
  const [isSomethingToggled, setIsSomethingToggled] = React.useState(false);

  const handleAction = () => {
    setIsSomethingToggled(!isSomethingToggled);
  };
  
  return (
    <div>
      <AppActions onClick={handleAction} />
      <AppListings isSomethingToggled={isSomethingToggled} />
    </div>
  );
}

function AppActions({ onClick }) {
  return (
    <div>
      <button onClick={onClick}>Click action</button>
    </div>
  );
}

function AppListings({ isSomethingToggled }) {
  return <div>Is something toggled: {isSomethingToggled ? 'yes' : 'no'}</div>;
}

ReactDOM.render(<AppLanding />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>


<div id="root">
</div>