Formik radio not working with nested object values

Question

I'm using Formik. When I try to render radio buttons using a nested object for my initial values per their documentation here: https://formik.org/docs/guides/arrays my radios cannot be selected.

Sandbox here: https://codesandbox.io/s/gracious-sanderson-8g3ls?file=/src/App.js:0-1046

My code:

import React from "react";
import { Field, Formik, Form } from "formik";
import { ReactstrapRadio } from "reactstrap-formik";

import { Col, Row, Container } from "reactstrap";

export const App = () => {
  return (
    <>
      <Formik
        initialValues={{
          name: {
            test: "testValue"
          }
        }}
      >
        {() => (
          <Container>
            <Form>
              <Row>
                <Col>
                  <Field
                    label="Test 1"
                    type="radio"
                    value="testValue"
                    name="name.test"
                    component={ReactstrapRadio}
                  />
                  <Field
                    label="Test2"
                    type="radio"
                    value="otherValue"
                    name="name.test"
                    component={ReactstrapRadio}
                  />
                </Col>
              </Row>
            </Form>
          </Container>
        )}
      </Formik>
    </>
  );
};

Using dot notation for other input types such as text seems to work fine.

Halim Halim · Accepted Answer · 2020-09-02T13:53:06

my guess is that the logic of it is fine but there is problem with the visual part, there is an issue with ReactstrapRadio styling maybe, I forked your sandbox and got rid of ReactstrapRadio and it worked fine, you can check it here https://codesandbox.io/s/naughty-christian-xhhdx?file=/src/App.js

Formik radio not working with nested object values

1 Answers