import React from 'react' ; import FBEmitter from "fbemitter" ; import GreetingStore from '../stores/GreetingStore' ; import GreetingState from '../types/GreetingState' ; import WhoToGreet from './WhoToGreet' ; import Greeting from './Greeting' ; class App extends React . Component < { } , GreetingState > { eventSubscription : FBEmitter . EventSubscription ; constructor ( props ) { super ( props ) ; this . state = this . getStateFromStores ( ) ; } private onChange = ( ) => { this . setState ( this . getStateFromStores ( ) ) ; } ; public componentWillMount ( ) { this . eventSubscription = GreetingStore . addChangeListener ( this . onChange ) ; } public componentWillUnmount ( ) { this . eventSubscription . remove ( ) ; } render ( ) { const { greetings , newGreeting } = this . state ; return ( < div className = "container-fluid" > < h1 > Hello People ! < /h1> < WhoToGreet newGreeting = { newGreeting } / > { greetings . map ( ( g , index ) => < Greeting key = { index } targetOfGreeting = { g } / > ) } < /div>); } private getStateFromStores ( ) { return GreetingStore . getState ( ) ; } } export default App ;