React Communicating between Parent and Child Component

App.tsx

import * as React from 'react'
import {Home} from "./components/Home";
export interface AppProps { compiler: string; framework: string; }

class App extends React.Component<AppProps,undefined> {

    onGreeting()
    {
        alert("Hello World");
    }

    render() {
        return (
            <div>
                <Home greet={this.onGreeting}/>
            </div>
        );
    }
}

export default App;

components/Home.tsx

import * as React from 'react'
export interface HomeProps { greet?:any }

export class Home extends React.Component<HomeProps,undefined> {

    render() {
        return (
            <div>
                Hello World

                <div>
                    <button onClick={this.props.greet}>Say Hello</button>
                </div>
            </div>
        );
    }
}

References
https://github.com/mhdr/ReactJSSamples/tree/master/009

Related