Toggling visibility based on mapped array

Question

so basically I have state that looks like this

this.state = {
  items: items,
  filters: {
    id: true,
    name: true,
    department: true,
    currency: true,
    price: true
  }
};

What I am trying to do is filter the visibility based off a checkbox input. The issue I'm having is figuring out how the app knows which column to toggle based off which checkmark.

Here is the map function that I am working with:

Object.keys(this.props.filters).map((filter, id) => {
        return ( 
        <div key={id}>
          <h1>
            {filter}
          </h1>
          <input
          onClick={this.handleCheckboxToggle}
          type="checkbox"/>
        </div>)

I want each checkbox to toggle the visibility of the corresponding filter and I'm having some trouble lol

Answer 1

You can do something like below -

  function handleCheckboxToggle(filter){
    const newFilters = {...this.state.filters}
    newFilters[filter] = !newFilters[filter]
    this.setState({filters: newFilters})
  }

 {Object.keys(filters).map((filter, id) => {
   return (
     <div key={id}>
      <h1>{filter}</h1>
        <input
          onClick={() => this.handleCheckboxToggle(filter)}
          checked={filters[filter]}
          type="checkbox" />
     </div>)
  })}