React multiple checkbox filters

Started learning React for fun yesterday and I'm trying to make a simple event listing web app. I found the official documentation to be quite good and have been following their examples.

So I butchered their 'Thinking in React' - [http://ift.tt/1haRS99] tutorial for my own needs but have come across a problem I can't wrap my head around.

I would like to have multiple checkbox filters that update a table of data but I cannot grasp how to control the state of these individual inputs whilst managing the necessary props. I think I understand why all checkboxes are ticked when only one is selected, because they are taking their state from the parent isChecked props?

var EventFilter = React.createClass({

  handleChange: function() {

    if (this.refs.isCheckedInput.checked) {

      this.props.onUserInput(
        this.refs.isCheckedInput.value,
        this.refs.isCheckedInput.checked
      );

    } else {
      this.props.onUserInput('', false);
    }

  },

  render: function() {

    return (
      <label>
        <input
          type="checkbox"
          value={this.props.value}
          checked={this.props.isChecked}
          ref="isCheckedInput"
          onChange={this.handleChange}
        />
        {this.props.value}
      </label>
    );

  }

});


var App = React.createClass({

  getInitialState: function() {

    return {
      selectedFilter: '',
      isChecked: false
    };

  },

  handleUserInput: function(selectedFilter, isChecked) {

    this.setState({
      selectedFilter: selectedFilter,
      isChecked: isChecked
    });

  },

  render: function() {

    return (

      <div className="app">

        <div>
          <EventFilter
            value="Bridgewater Hall"
            selectedFilter={this.state.selectedFilter}
            isChecked={this.state.isChecked}
            onUserInput={this.handleUserInput}
          />
          <EventFilter
            value="The Deaf Institute"
            selectedFilter={this.state.selectedFilter}
            isChecked={this.state.isChecked}
            onUserInput={this.handleUserInput}
          />
        </div>

        <EventTable
          selectedFilter={this.state.selectedFilter}
          listings={this.props.source}
        />

      </div>

    );

  }

});

Here is a link to my JSFiddle - http://ift.tt/1t1EvCc

A note about the example I provided, for some reason the checkboxes won't select and filter the data but they do on my local setup - the problem being even though the data is filtered both checkboxes are selected, even though only the value of the selected is passed.

I had to change ReactDOM.render to React.render to get it to run at all too, not sure why?

Any advice would be appreciated, like I said I'm trying to learn for fun so any good articles or resources would be great as I'm finding it hard to think in the proper React mindset. Thanks.