5

I'm developing my first app and still learning the flow. So suppose I have a component called:

Parent which holds a method HelloWorld() like the following example:

import React, { Component } from 'react';

class Parent extends Component {
    Helloworld() {
        console.log('Hello world');
    }

    render () {
        return (
            <View>{this.props.children}</View>
        )
    }
}

module.exports = Parent;

and then i want to import this in to another component and use its method then how do I do it? Ill write another short example of how I would implement it.

import React, { Component } from 'react';

import { Parent } from 'path to parent'; 
//or
const Parent = require('path to parent');
//which of these is better?

class Home extends Component {
    Helloworld() {
        console.log('Hello world');
    }

    render () {
        return (
            <Parent>
                // this is what i need
                <Button onClick={parent.Helloword()}>Some Button</Button>
            </Parent>
        )
    }
}

module.exports = Home;

Thank you in advanced for your help.

TheMan68
  • 1,429
  • 6
  • 26
  • 48

3 Answers3

6

Usually you should pass info from parent to child through props.

parent.jsx:

import Child from './child';

class Parent extends Component {
    constructor(props) {
        super(props);

        this.helloWorld = this.helloWorld.bind(this);
    }

    helloWorld() {
        console.log('Hello world!');
    }

    render() {
        return (
            <View><Child method={this.helloWorld} /></View>
        );
    }
}

child.jsx:

class Child extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Button onClick={this.props.method} />
        );
    }
}

Edit: about preference between import and require, I believe it's a matter of taste, but I think import is cleaner.

hakazvaka
  • 735
  • 6
  • 19
lalkmim
  • 646
  • 4
  • 11
  • thank you for getting back to me. I havent had time to test this but i will asap and give you feed back. – TheMan68 Aug 01 '16 at 05:46
  • There's another difference about import and require I forgot to mention: `import` can only be used at beginning of the files, while `require` can be used anywhere. – lalkmim Aug 01 '16 at 20:24
  • both of the answers here work but i find this one is a little more tailored to what I need. thank you very much – TheMan68 Aug 08 '16 at 05:13
1

You can read React Native-Tutorial-What's going on here? about import. and here

Community
  • 1
  • 1
samm
  • 620
  • 10
  • 22
  • Ill mark your answer up but not mark it as an answer as its only half of this question. Thank you very much. – TheMan68 Jul 29 '16 at 05:46
1

We can pass a prop in the child class: And then call it from the child: this.props.propName() We can pass string, numbers, functions, array, objects in prop

import React from 'react';
import {
  View,
  Text,
} from 'react-native';

var Parent = React.createClass({   
  render: function() {
    return (
      <Child foo={()=>this.func1()} bar={()=>this.func2()} />
    );
  },
  func1: function(){
    //the func does not return a renderable component
    console.log('Printed from the parent!');
  }
  func2: function(){
    //the func returns a renderable component
    return <Text>I come from parent!</Text>;
  }
});

var Child = React.createClass({   
  render: function() {
    this.props.foo();
    return (
      <Text>Dummy</Text>
      {this.props.bar()}
    );
  },
});

module.exports = Parent;
Adesh Shah
  • 442
  • 4
  • 12