Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
react formik how pass value and id from checkbox component

Here is my checkbox component:

function CheckBoxesControl(props) {
  const { label, name, options, ...rest } = props;

  return (
    <div className='checkbox-control'>
      <span className='checkbox-title'>{label}</span>
      <div className='check-elements'>
        <Field name={name}>
          {({ field, form }) => {
            return options.map((option) => {
              return (
                <React.Fragment key={option.key}>
                  <input
                    type='checkbox'
                    id={option.key}
                    {...field}
                    {...rest}
                    value={option.value}
                    checked={field.value.includes(option.value)}
                  />
                  <label htmlFor={option.value}>{option.value}</label>
                </React.Fragment>
              );
            });
          }}
        </Field>
      </div>
      <ErrorMessage component={TextError} name={name} />
    </div>
  );
}
export default CheckBoxesControl;

Code for FormikControl:

import React from 'react';
import CheckBoxesControl from './checkboxescontrol';
import RadioButtons from './radiobuttons';

function FormikControl(props) {
  const { control, ...rest } = props;

  switch (control) {
    case 'radio':
      return <RadioButtons {...rest} />;
    case 'checkbox':
      return <CheckBoxesControl {...rest} />;

    default:
      return null;
  }
}

export default FormikControl;

And parent component:

 <Formik
            initialValues={formValues || initialValues}
            validationSchema={validationSchema}
            validateOnMount
            onSubmit={onSubmit}
            enableReinitialize 
      >
        {(formikProps) => {
            return (
                <Form>
                <FormikControl
                    control='checkbox'
                    label='Some label'
                    name='somearray'
                    options={somearray}
                  />
    
                </Form>
     </Formik>

somearray- it is an array that I get from firestore that looks like this: [{key:'', value:''}]

I am a beginner, so please bear with me:
Currently all I can get is either option.value or option.key
What I want is the value from checked checkbox send to formik to look like this:
[id: option.id, name: option.value]

Is it possible ?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!