Formik FieldArray doesn't accept checkbox Objects

Question

I am trying to push an checkbox Object in Formik, but it is not working. I have taken reference from https://codesandbox.io/s/formik-example-forked-owodd?file=/index.js

but I want to push object inside initialValue.

Below is my way of doing it

{userManagement.map((permissions) => (
                              <li className="col-sm-3 col-xs-6" key={permissions.task}>
                                <label className="checkbox">
                                  <input
                                    name="permission"
                                    type="checkbox"
                                    value={permissions}
                                    onBlur={(e) => {
                                      if (e.currentTarget.checked) {
                                        push({ permission: permissions });
                                        console.log(values.permission);
                                      } else {
                                        const idx = values.permission.indexOf(permissions.value);
                                        remove(idx);
                                      }
                                    }}
                                  />
                                  <span />
                                  {permissions.label}
                                </label>
                              </li>
                            ))}

Code Ninja · Accepted Answer · 2021-07-20 10:19:47Z

My solution towards this is:

                      <FieldArray
                        name="permission"
                        render={({ push, remove }) => (
                          <ul className="sub-rights-area row">
                            {permissions.map((perm) => (
                              <li className="col-sm-3 col-xs-6" key={perm.task}>
                                <label className="checkbox">
                                  <input
                                    name="permission"
                                    type="checkbox"
                                    value={perm.task}
                                    checked={values.permission.map((e) => e.task).includes(perm.task)}
                                    onChange={(e) => {
                                      if (e.target.checked) {
                                        push({ status: perm.status, task: perm.task });
                                        console.log(values.permission);
                                      } else {
                                        const index = values.permission
                                          .map(function (e) {
                                            return e.task;
                                          })
                                          .indexOf(perm.task);
                                        remove(index);
                                      }
                                    }}
                                  />
                                  <span />
                                  {perm.name}
                                </label>
                              </li>
                            ))}
                          </ul>
                        )}
                      />

Collectives™ on Stack Overflow

Formik FieldArray doesn't accept checkbox Objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related