Formik and Form.Check does not capture value

Question

I'm utilising Formik and React-Bootstrap to construct a user registration form. For now, I'm just console.logging the values captured from the form but for some reason my form does not capture the values from <Form.Check> element.

I would really appreciate any help as I've been struggling for a few hours!

const Register = () => {
const formik = useFormik({
    initialValues: {
        firstname: '',
        surname: '',
        email: '',
        password: '',
        role: 'user',
        secondaryinterest: [''],
    },
    validationSchema: Yup.object({
        firstname: Yup.string()
        .min(2, 'Your name is too short')
        .max(100, 'Your name is too long')
        .required('We require your name'),
        surname: Yup.string()
        .min(2, 'Your name is too short')
        .max(100, 'Your name is too long')
        .required('We require your name'),
        email:Yup.string()
        .required('Sorry the email is required')
        .email('This is not a valid email'),
        password:Yup.string()
        .required('Sorry the password is required'),
        secondaryinterest: Yup.array()
        .min(1, "You need to select at least one"),           
    }),
    onSubmit:(values) => {
        console.log(values)
    }
})

return(
    <Form onSubmit={formik.handleSubmit}>
        <Form.Group>
        <Form.Label>Select the five most relevant for you</Form.Label>
            {['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
                <div key={`${secondaryinterest}`} className="mb-3">
                    <Form.Check
                        type='checkbox'
                        name='secondaryinterest'
                        placeholder="secondaryinterest"
                        id={`${secondaryinterest}`}
                        label={`${secondaryinterest}`}
                        onChange={formik.handleChange}
                        {...formik.getFieldProps('secondaryinterest')}
                    />
                </div>
            ))}
        </Form.Group>
        <Row className="mb-3">
            <Form.Group as={Col} controlId="formGridFirstname">
                <Form.Label>First Name</Form.Label>
                <Form.Control 
                    type="text"
                    name="firstname"
                    variant="outlined"
                    {...formik.getFieldProps('firstname')}
                />
                {formik.touched.firstname && formik.errors.firstname ? (
                    <div>{formik.errors.firstname}</div>
                ) : null}

            </Form.Group>
            <Form.Group as={Col} controlId="formGridSurname">
                <Form.Label>Last Name</Form.Label>
                <Form.Control 
                    type="text"
                    name="surname"
                    variant="outlined"
                    {...formik.getFieldProps('surname')}
                />
                {formik.touched.surname && formik.errors.surname ? (
                    <div>{formik.errors.surname}</div>
                ) : null}
            </Form.Group>
        </Row>
        <Row className="mb-3">
            <Form.Group as={Col} controlId="formGridEmail">
                <Form.Label>E-mail</Form.Label>
                <Form.Control
                    type="email"
                    name="email"
                    variant="outlined"
                    {...formik.getFieldProps('email')}
                />
                {formik.touched.email && formik.errors.email ? (
                    <div>{formik.errors.email}</div>
                ) : null}
            </Form.Group>
            <Form.Group as={Col} controlId="formGridPassword">
                <Form.Label>Enter your password</Form.Label>
                <Form.Control
                    type="password"
                    name="password"
                    variant="outlined"
                    {...formik.getFieldProps('password')}
                />
                {formik.touched.password && formik.errors.password ? (
                    <div>{formik.errors.password}</div>
                ) : null}
            </Form.Group>
        </Row>
        <Button variant="primary" type="submit">
            Register
        </Button>
        
    </Form>
}

Console log output is:

{firstname: "Dave", surname: "Kula", email: "davekula@gmail.com", password: "ddhshja", role: "user", secondary interest: [],...}

Answer 1

I was able to fix it and thought to post the answer in case it helps someone else a a later stage

{['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
            <div key={`${secondaryinterest}`} className="mb-3">
                <Form.Check
                    type='checkbox'
                    name='secondaryinterest'
                    value={`${secondaryinterest}`}
                    label={`${secondaryinterest}`}
                    onChange={formik.handleChange}
                />
            </div>
        ))}

I stipulated the name and value fields. Also the {...formik.getFieldProps('secondaryinterest')} was redundant.

Answer 2

This part actually doesn't do anything. What you want to do actually, when you set the checkmark, it should add it to the array of secondaryinterest. However you didn't give instructions and Formik cannot just guess it.

 {['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
                <div key={`${secondaryinterest}`} className="mb-3">
                    <Form.Check
                        type='checkbox'
                        name='secondaryinterest'
                        placeholder="secondaryinterest"
                        id={`${secondaryinterest}`}
                        label={`${secondaryinterest}`}
                        onChange={formik.handleChange}
                        {...formik.getFieldProps('secondaryinterest')}
                    />
                </div>
            ))}

Easier change for you, I suggest, create new initial values for each checkbox. Make them separate.