You can do it by storing the checked state of the filters.

For example, your state can look something like:

state = {

    items: [

    {

        name: name1,

        useful: true

    },

    {

        name: name2,

        useful: false

    }

    ],

    filters: { 'name1': false, 'name2': false}, // key value pair name:checked

    filteredItems: []

};

Then your click/change handler would update both the filtered list and the actual filters state (what's checked).

Here's an example of that:

(Update: Heavily commented as per request in comments)

  // Using syntax: someFunc = (params) => { ... }

  // To avoid having to bind(this) in constructor

  onChange = evt => {

    // const is like var and let but doesn't change

    // We need to capture anything dependent on

    //  evt.target in synchronous code, and

    //  and setState below is asynchronous

    const name = evt.target.name;

    const checked = evt.target.checked;



    // Passing function instead of object to setState

    // This is the recommended way if

    //    new state depends on existing state

    this.setState(prevState => {

      // We create a new object for filters

      const filters = {

        //  We add all existing filters

        //  This adds them with their existing values

        ...prevState.filters,

        // This is like:

        //    filters[name] = checked

        // which just overrides the value of

        //    the prop that has the name of checkbox

        [name]: checked

      };



      // Object.keys() will return [name1, name2]

      // But make sure that filters in

      //    our initial state has all values

      const activeFilterNames = Object.keys(filters).filter(

        // We then filter this list to only the ones that

        //    have their value set to true

        //    (meaning: checked)

        // We set this in the `const filter =` part above

        filterName => filters[filterName]

      );



      // We get the full list of items

      // (Make sure it's set in initial state)

      // Then we filter it to match only checked

      const filteredItems = prevState.items.filter(item =>

        // For each item, we loop over

        //     all checked filters

        // some() means: return true if any of the

        //    array elements in `activeFilterNames`

        //    matches the condition

        activeFilterNames.some(

          // The condition is simply the filter name is

          //    the same as the item name

          activeFilterName => activeFilterName === item.name

        )

      );



      // The object returned from setState function

      //    is what we want to change in the state

      return {

        // this is the same as

        // { filter: filters,

        //    filteredItems: filteredItems }

        // Just taking advantage of how const names

        //    are the same as prop names

        filters,

        filteredItems

      };

    });

  };

I'm using latest features of JS / Babel in here but hopefully the code is clear. I also had to use evt.target before entering setState()

Here's a full component example:

import * as React from react;

import ReactDOM from react-dom;



import ./styles.css;



class App extends React.Component {

  state = {

    items: [

      {

        name: name1,

        useful: true

      },

      {

        name: name2,

        useful: false

      }

    ],

    filters: { name1: false, name2: false },

    filteredItems: []

  };



  // Using syntax: someFunc = (params) => { ... }

  // To avoid having to bind(this) in constructor

  onChange = evt => {

    // const is like var and let but doesn't change

    // We need to capture anything dependent on

    //  evt.target in synchronous code, and

    //  and setState below is asynchronous

    const name = evt.target.name;

    const checked = evt.target.checked;



    // Passing function instead of object to setState

    // This is the recommended way if

    //    new state depends on existing state

    this.setState(prevState => {

      // We create a new object for filters

      const filters = {

        //  We add all existing filters

        //  This adds them with their existing values

        ...prevState.filters,

        // This is like:

        //    filters[name] = checked

        // which just overrides the value of

        //    the prop that has the name of checkbox

        [name]: checked

      };



      // Object.keys() will return [name1, name2]

      // But make sure that filters in

      //    our initial state has all values

      const activeFilterNames = Object.keys(filters).filter(

        // We then filter this list to only the ones that

        //    have their value set to true

        //    (meaning: checked)

        // We set this in the `const filter =` part above

        filterName => filters[filterName]

      );



      // We get the full list of items

      // (Make sure it's set in initial state)

      // Then we filter it to match only checked

      const filteredItems = prevState.items.filter(item =>

        // For each item, we loop over

        //     all checked filters

        // some() means: return true if any of the

        //    array elements in `activeFilterNames`

        //    matches the condition

        activeFilterNames.some(

          // The condition is simply the filter name is

          //    the same as the item name

          activeFilterName => activeFilterName === item.name

        )

      );



      // The object returned from setState function

      //    is what we want to change in the state

      return {

        // this is the same as

        // { filter: filters,

        //    filteredItems: filteredItems }

        // Just taking advantage of how const names

        //    are the same as prop names

        filters,

        filteredItems

      };

    });

  };



  renderCheckboxes() {

    return Object.keys(this.state.filters).map((name, index) => {

      return (

        <label key={index}>

          <input

            onChange={this.onChange}

            type=checkbox

            checked={this.state.filters[name]}

            name={name}

          />

          {name}

        </label>

      );

    });

  }



  render() {

    const items = this.state.filteredItems.length

      ? this.state.filteredItems

      : this.state.items;

    return (

      <div>

        <div>{this.renderCheckboxes()}</div>

        <ul>

          {items.map(item => (

            <li key={item.name}>

              {item.name}

              {item.useful &&  (useful)}

            </li>

          ))}

        </ul>

      </div>

    );

  }

}



const rootElement = document.getElementById(root);

ReactDOM.render(<App />, rootElement);

You can try it live from here:

https://codesandbox.io/embed/6z8754nq1n

You can of course create different variations of this as you wish. For example you might choose to move the filtering to the render function instead of the change event, or store how you store the selected filters, etc, or just use it as is. Whatever suits you best :)