How to call function from different Component?

Question

I have a basic class:

export default class Foo extends Component{
 constructor(props){}
 woop(){
  somethingimportanthappening..
 }
}

in the other component I import it like this:

import Foo from './Foo'
export default class Component2 extends Component{
 constructor(props){}

 randomfunction(){
   Foo.woop() // FAILS
 }
}

How can I call the function "woop" from the other component (Component2)? Foo.woop() isn't working ..

OK, blame me for being old fashioned, if you will, but I've not played around with new ES6 stuff, so I'm not totally clear what this does. Yet, I _think_ you're exporting a class `Foo` and `woop()` is an _instance method_. Hence, shouldn't you do `foo = new Foo(); foo.woop()`? — VLAZ, Sep 13 '16 at 12:31
Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not"! — , Sep 13 '16 at 13:10

score 6 · Accepted Answer · answered Sep 14 '16 at 02:20

6

In React a component have an independent function, so in Foo component you define it, something like

export default class Foo extends Component{
  constructor(props){}
  woop(){
    somethingimportanthappening..
  }
  render() {
    <div>Class Foo</div>
  }
}

and when you want to use Foo component, you just import and use

<Foo />

and if you want to use a function in Foo component, you can define a reference to Foo

<Foo ref="foo" />

then use it by

import Foo from './Foo'
export default class Component2 extends Component{
  constructor(props){}

  randomfunction(){
    this.refs.foo.woop();
  }

  render() {
    return <Foo ref="foo" />
  }
}

answered Sep 14 '16 at 02:20

Ngọc Bạch Văn

94
3

Works perfectly for me :) – RRikesh Sep 14 '16 at 05:10
True, this works quite well, but only with a parental relationship.. what if there isn't any? – dv3 Sep 14 '16 at 06:47
@dv3 if you inherit a class, you can call parent function through super.methodName(), maybe works :D – Ngọc Bạch Văn Sep 16 '16 at 03:24

Kesem David · Answer 2 · 2016-09-13T12:52:56.227

1

Since woop is not a static function you cannot Foo.woop()

You should instantiate a Foo instance as follows:

import Foo from './Foo'

export default class Component2 extends Component{
    private fooInstance: Foo;

    constructor(props){
      this.fooInstance = new Foo(props);
    }

    useFoo(){
      this.fooInstance.woop();
    }
}

Let me know if something is unclear :)

edited Sep 13 '16 at 12:52

answered Sep 13 '16 at 12:32

Kesem David

2,135
3
27
46

makes sense :) but it's throwing unexpected token on the 'private fooInstance: Foo;' line... *confused* – dv3 Sep 13 '16 at 12:38
Try it without the private, it is just a recommendation. (assuming the unexpected token is the `private` and not something about the `: Foo` type) – Kesem David Sep 13 '16 at 12:38
'Foo is not a constructor'... lol is this something react-native specific? – dv3 Sep 13 '16 at 12:40
updated my answer, your `Foo` class should have a constructor for instantiating a new instance of it – Kesem David Sep 13 '16 at 12:42
Thanks but it already had a constructor in it.. didn't really change it.. – dv3 Sep 13 '16 at 12:45
Please share some more of the code so i can help you better :) – Kesem David Sep 13 '16 at 12:46
Updated my answer according to your new shared code, assuming the given `props` to the `Component2` is being forwarded to the constructor of the `Foo`, let me know if it solves your problem :) – Kesem David Sep 13 '16 at 12:53

score 0 · Answer 3 · edited May 23 '17 at 11:51

Creating an instance of a class to call a function seems wrong to me. I'm not sure but its like calling a function from different Activity inside another Activity in Android: You can't and mustn't do that.

Imo, the proper way to call a function of a different class to pass the function callback as props (if there is a parental relation). If there isn't any, triggering Events using react-native-simple-events is fairly simple.

Alternatively, you can use Redux which makes your app more robust. This may change and improve your overall app logic.

How to call function from different Component?

3 Answers3