'use strict'
 
import React from 'react'
import {EventComponent} from 'react-event-component'
 
class YourComponent extends EventComponent {
  constructor (props) {
    super(props)
 
    this.state = {myValues: []}
  }
 
  render () {
    const {myValues} = this.state
 
    return (
      <div>
        There are {(myValues && myValues.length) || 'no'} values.
      </div>
    )
  }
}
 
export default YourComponent

'use strict'
 
import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
import {globalEventListener} from 'react-event-component'
 
import YourComponent from './YourComponent'
 
class ParentComponent extends React.Component {
  doStuff (value) {
    globalEventListener.emit('someEvent', state => {
      state.myValues = state.myValues.concat([value])
      return state
    })
  }
 
  render () {
    return (
      <div>
        <div>
          <YourComponent listenerId='someEvent' />
        </div>
 
        <div>
          <button onClick={this.doStuff}>
            Add Value
          </button>
        </div>
      </div>
    )
  }
}
 
ReactDOM.render(
  <ParentComponent />,
  document.getElementById('container')
)