React JavaScript: Get just "true" checkboxes

Question

I would like to get just the "true" checkboxes, to insert then into a my db.

I have an array of categories:

categories_all: [
{
    cat_key: "catfood"
    at_name: "catfood"
    id: 2
    kindof: "food"
    label: "Cat Food"
},

ect... ]

I map them in checkboxes:

  const [checkedItems, setCheckedItems] = useState({})


  const handleCheckChange = event => {

    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
    })

  }

  return (

          <div>
            {categories_all.map(item => (
              <label key={item.cat_key}>
                {item.label}{" "}
                <Checkbox
                  name={item.id} // I need the id not the name
                  checked={checkedItems[item.id]}
                  value={item.value}
                  onChange={handleCheckChange}
                />{" "}
              </label>
            ))}
          </div>
        )}

if I console.log(checkedItems) I get this:

{2: false, 3: true, 4: true} // this is just the id not the name

I would like to get something like:

{3, 4}

To insert into a table

How can I do it?

goto · Accepted Answer · 2020-07-20 11:45:12Z

1

Assuming the final output you get prior to submitting your form is an object that looks like the following:

{ 2: false, 3: true, 4: true }

You could use Object.entries to iterate through key/value pairs inside that object and only return keys with values that are true:

const formData = {2: false, 3: true, 4: true}

// use `Array.reduce` to iterate through
// object's key/value pairs
const final = Object.entries(formData).reduce(
  (accumulator, entry) => {
    // use destructing assignment to 
    // unpack key & value from an entry
    const [key, value] = entry;
    
    // if `value` is `false`, don't append
    // to the array, otherwise append the key
    if (!value) {
      return accumulator;
    }
    return [...accumulator, parseInt(key, 10)];
  }
, []);

console.log(final);

References:

edited Jul 20, 2020 at 11:45

answered Jul 20, 2020 at 11:08

goto

4,44517 silver badges23 bronze badges

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

Comments

Hamza Jadid · Accepted Answer · 2020-07-20 11:11:19Z

1

Loop over the entries of an object and check if the value is true, your code should look something like that:

let items = {2: false, 3: true, 4: true}
let checkedItems = {}; 
for (const [key, value] of Object.entries(items)) { 
    if (value === true) checkedItems[key] = key; 
}
console.log(checkedItems); /* {3: "3", 4: "4"} */

answered Jul 20, 2020 at 11:11

Hamza Jadid

5966 silver badges21 bronze badges

1 Comment

Marco Disco Over a year ago

thanks, but it doesn't work, I chose another solution

aquinq · Accepted Answer · 2020-07-20 11:14:10Z

0

Do you really need to keep track of unchecked values ?

If not, you probably need to change the data structure to make checkedItems and array containing the names of checked elements :

const [checkedItems, setCheckedItems] = useState([])

const handleCheckChange = (event) => {
  if (event.target.checked) {
    setCheckedItems((prev) => prev.concat(event.target.name));
  } else {
    setCheckedItems((prev) => prev.filter((current) => current !== event.target.name));
  }
};

This way, checkedItems only contains checked items (seems fair to me) and you can directly send it to your database.

edited Jul 20, 2020 at 11:14

answered Jul 20, 2020 at 11:08

aquinq

1,4589 silver badges21 bronze badges

Comments

Captain Kenpachi · Accepted Answer · 2020-07-20 11:18:14Z

0

Check boxes aren't meant to have True/false values. When you check a checkbox, it's value is added to the Form collection. Unchecking it removes it.

The right solution is to make the checkbox's value the Id of the thing you want to insert. On the server side, you will only see the selected ID's.

Although a more useful solution is to perform the selected/not selected check on the server to determine which previously selected things you should remove, in addition to which you should add. It's a more complete and robust solution than simply working with fresh inserts.

answered Jul 20, 2020 at 11:18

Captain Kenpachi

7,2458 gold badges50 silver badges71 bronze badges

Collectives™ on Stack Overflow

React JavaScript: Get just "true" checkboxes

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related