I'm developing my first app and still learning the flow. So suppose I have a ponent 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 ponent 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.

I'm developing my first app and still learning the flow. So suppose I have a ponent 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 ponent 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.

• javascript
• mobile
• react-native

3 Answers 3

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.

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

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 ponent
    console.log('Printed from the parent!');
  }
  func2: function(){
    //the func returns a renderable ponent
    return <Text>I e from parent!</Text>;
  }
});

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

module.exports = Parent;