Calling a method of a parent component from child - React Native

Question

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.

Answer 1

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.

Answer 2

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