Breaking News: Grepper is joining You.com. Read the official announcement!

useformik checkbox multiselect

Mystic Dev answered on January 24, 2022 Popularity 7/10 Helpfulness 2/10

answer useformik checkbox multiselect

useformik checkbox multiselect

Comment

import React from "react";
import { useFormik } from "formik";

export default function App() {
  return <ProjectsForm></ProjectsForm>;
}

const tags = ["one", "two", "three"];

const ProjectsForm = () => {
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      tags: []
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  const handleChange = (e) => {
    const { checked, name } = e.target;
    if (checked) {
      formik.setFieldValue("tags", [...formik.values.tags, name]);
    } else {
      formik.setFieldValue(
        "tags",
        formik.values.tags.filter((v) => v !== name)
      );
    }
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      {tags.map((tag) => (
        <div key={tag}>
          <input
            id={tag}
            type="checkbox"
            name={tag}
            checked={formik.values.tags.includes(tag)}
            onChange={handleChange}
          />
          <label htmlFor={tag}>{tag}</label>
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
};

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: checkbox javascript multi-select

Link to this answer
Share Copy Link

Contributed on Jan 24 2022

Mystic Dev

0 Answers Avg Quality 2/10

useformik checkbox multiselect

Contents

More Related Answers

useformik checkbox multiselect

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.