Filter By Checkbox Issue [reactjs]

Question

I'm trying to setup filtering by checkbox in React.

What I want to happen is:

User navigates to products where all products on displayed on page load.
User selects checkbox and filtered products are displayed.
De-selecting the checkbox will return all products again.

What currently happens is:

User navigates to products, no products are displayed.
User selects checkbox, filtered products are returned.
Use deselects checkbox, all products are returned.

So it's nearly there, but something is missing for the initial page load, can anyone please advise what I've missed?

Example Data =

    console.log(checkedInputs) = Object { 35: true }
    console.log(Item) = Object { itemID: "5190", systemSku: "item", defaultCost: "78.95", avgCost: "78.95", discountable: "true", tax: "true", archived: "false", itemType: "default", serialized: "false", description: "item", … }Object { itemID: "5191", systemSku: "item", defaultCost: "142.95", avgCost: "142.95", discountable: "true", tax: "true", archived: "false", itemType: "default", serialized: "false", description: "item", … }

On initial page load checkedInputs =

console.log(checkedInputs = Object { })

Thanks!

Products.jsx

const Products = (props) => {
  const { Item } = props.items
  const { Category } = props.categories

  const [checkedInputs, setCheckedInputs] = useState({})

  const handleInputChange = (event) => {
    setCheckedInputs({ ...checkedInputs, [event.target.value]: event.target.checked })
  }

  useEffect(() => {
    console.log('Checked Inputs', checkedInputs)
  }, [checkedInputs])

  return (
    <Layout>
      <div className="flex mx-96">
        <div className="w-1/4">
          <ProductFilter category={Category} handleInputChange={handleInputChange} checkedInputs={checkedInputs} />
        </div>
        <div className="w-3/4">
          <div className="lg:grid grid-cols-3 gap-2 lg:my-12 lg:justify-center">
            {Item.map(item => {
              for (const [key, value] of Object.entries(checkedInputs)) {
                if (!checkedInputs || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
                  return <ProductCard item={item} key={item.itemID} />
                }
                if (value === true) {
                  if (item.categoryID === key) {
                    console.log(item)
                    return <ProductCard item={item} key={item.itemID} />
                  }
                }
              }
            })}
          </div>
        </div>
      </div>
    </Layout>
  )
}

it looks so difficult, items is an array of objects. every object add a property of display default true. when clicking on the checkbox, all product display converts to false except who is clicked. — Omer Cohen
– Omer Cohen, Commented Nov 21, 2020 at 20:34

PhantomSpooks · Accepted Answer · 2020-11-27 14:46:06Z

1

Im not sure if this is the problem, but you I think you want to change

if (!checkedInputs || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
  return <ProductCard item={item} key={item.itemID} />
}

to

if (Object.keys(checkedInput).length < 1 || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
  return <ProductCard item={item} key={item.itemID} />
}

An empty object evaluates to true. I think an object will always evaluate to true. (Try Boolean({}) and Boolean({x:5})). Also, I am a bit confused (I could be missing something) as of why you are calling Object.keys(checkedInputs).every in every iteration of the Object.entries(checkedInputs). That value doesnt change right? So couldn't it be a static value you set before the looping?

edited Nov 27, 2020 at 14:46

answered Nov 21, 2020 at 16:36

PhantomSpooks

3,6202 gold badges10 silver badges16 bronze badges

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

3 Comments

Darryl Morley Over a year ago

I get where your going with this answer, unfortunately it doesn't resolve the problem. I might not need to be doing that :)

Darryl Morley Over a year ago

Fixed it, with the order that you mentioned! Thank you!

Darryl Morley Over a year ago

And 'Object.keys(checkedInput).length < 1'

PhantomSpooks · Accepted Answer · 2020-11-21 17:06:40Z

const Products = (props) => {
  const { Item } = props.items
  const { Category } = props.categories

  const [checkedInputs, setCheckedInputs] = useState({})

  const handleInputChange = (event) => {
    setCheckedInputs({ ...checkedInputs, [event.target.value]: event.target.checked })
  }

  useEffect(() => {
    console.log('Checked Inputs', checkedInputs)
  }, [checkedInputs])
  function renderItems(){
    let hasNoFilters = Object.keys(checkedInput).length < 1 || 
      Object.keys(checkedInputs).every(value =>checkedInputs[value] === false)
    if(hasNoFilters){
      // return everything if no filter
      return Item.map(item=>return <ProductCard item={item} key={item.itemID} />)
    }
    else{
      let filters = Object.keys(checkedInput).filter(itemID=>checkedInput[itemID] === true)
      return Item.map(item=>{
        //check to make sure itemID is found in filters
        let validItem = filters.find(itemID=>itemID === item.itemID)
        if(!validItem)
          return
        return <ProductCard item={item} key={item.itemID} />
      })
    }
  }  
  return (
    <Layout>
      <div className="flex mx-96">
        <div className="w-1/4">
          <ProductFilter category={Category} handleInputChange={handleInputChange} checkedInputs={checkedInputs} />
        </div>
        <div className="w-3/4">
          <div className="lg:grid grid-cols-3 gap-2 lg:my-12 lg:justify-center">
            {renderItems()}
          </div>
        </div>
      </div>
    </Layout>
  )
}

Collectives™ on Stack Overflow

Filter By Checkbox Issue [reactjs]

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related