React multiple checkbox filters

Question

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://facebook.github.io/react/docs/thinking-in-react.html] 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://jsfiddle.net/zhpk99ky/

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.

Edit: gravityplanx mentioned I didn't pose a question so I guess I didn't make one clear enough!

How can I handle multiple checkbox states whilst still passing over the individual input values that are need to filter the data?

Your fiddle is pulling in an old version of react 0.12 specifically. Thats pre the time they split out into the react-dom package. — ctrlplusb
– ctrlplusb, Commented Jun 1, 2016 at 17:40

Jake Haller-Roby · Accepted Answer · 2016-06-01 18:33:03Z

5

Ditch isSelected from your App component. It's not really doing anything useful for you.

Instead, have your child components look like this;

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

If you want to apply multiple filters, change selectedFilter to selectedFilters as an array, and push/pop strings to it in your change handler, and changed isChecked in the Filter props to be a .includes or .indexOf.

answered Jun 1, 2016 at 18:33

Jake Haller-Roby

6,4381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React multiple checkbox filters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related