Push objectIds in an array when checkbox is checked in a React.js Functional Component

Question

I have an array in which I want to push the objectIds whenever the checkbox is checked and remove the ids after admin removes the check-mark from it.

<Form.Label>Select Package/s:</Form.Label>
{packages.map((item) => (
  <Form.Check
    key={item._id}
    type="checkbox"
    label={item.name}
  />
))}

This is the respnse:

How can I do that?

Nikola Cvetic · Accepted Answer · 2022-09-24 11:12:59Z

1

try to set onChange eventhandler on each list item, and spread the checked packages state:

const [checkedPackages, setCheckedPackages] = useState([]);

... 

<Form.Check
  key={item._id}
  onChange={
    (e) => {
    setCheckedPackages((c) => {
       let returnValue = e.target.checked ? 
         [...c, item._id] 
         :
         c.filter(el => el != item._id);
       return returnValue        
      })
    }
  }
...

edited Sep 24, 2022 at 11:12

answered Sep 24, 2022 at 10:25

Nikola Cvetic

1364 bronze badges

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

3 Comments

John Oliver Over a year ago

Nope, it is not working it gives an error like this: Expected an assignment or function call and instead saw an expression

Nikola Cvetic Over a year ago

Sorry, needed some time to write it better and to correct it, try now, it's harder without a whole working code! I hope it will work now, see for the filter only to adjust it if needed!

John Oliver Over a year ago

Thank you for the answer it is working but it has syntax error. There is no need of curly braces after the two arrows and there is no need to declare a variable returnValue. This is working

onChange={(e) =>                   setSelectedPackage((c) =>                     e.target.checked                       ? [...c, item._id]                       : c.filter((el) => el !== item._id)                   )                 }

Collectives™ on Stack Overflow

Push objectIds in an array when checkbox is checked in a React.js Functional Component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related