I am using a couple of generic components to promote reusability such as list, button, table etc. These components all have a controller class which is used to handle all the properties between the same group of components such as listItem, listContainer, listHead. My issue is how can I bubble up the event from the controller to the parent component using the list.
Parent Component calling List
    @inject('dataStore')
    @observer
    export class FooList extends Component {
      handleListItemClick(id) {
        console.log('Where I want to access click data!', id)
      }
      render() {
        return (
          <List
            title='Foo List'
            modeable
            data={this.dataStore.Bar}
            model={barModel}
            listItemTypesEnabled={true}
            />
        )
      }
    }
List Component (creating new instance of ListController)
  export class List extends Component {  
  constructor(props) {
    super(props)
    this.listController = new ListController()
    this.listController.title = props.title
    this.listController.modeable = props.modeable
    this.listController.data = props.data
    this.listController.model = props.model
    this.listController.listItemTypesEnabled = props.listItemTypesEnabled || false
    props.selectedItemId = this.listController.selectedListItemId
  }
  render() {
    return <Provider listController={this.listController}>
      <ListContainer {...this.props} />
    </Provider>
  }
}
List Controller Class
import { observable, action, computed } from 'mobx'
export class ListController {
  @observable data
  @observable model
  @observable title
  @observable modeable
  @observable listMode = 'thin'
  @observable selectedListItemId = -1
  @action handleModeClick = (mode) => {
    this.listMode = mode
  @action handleItemClick = (itemId) => {
    console.log('clicked:', itemId)
    this.selectedListItemId = itemId //i was able to get to this part successfully
  }
How can i access the click event from the Parent component please?
