radio group buttons using ant design dont work

Question

I am experiencing some issues with radio group buttons. Can someone help me with this issue. (your help is much appreciated)

1. Current Issue: Radio Group are not clickable. Im not sure where I missed up!
2. Technologies Used: React hooks, styled-components , and design for the radio buttons.

RadioGroup.js

import React from "react";
import { Radio } from "antd";
import styled from "styled-components";
import { theme } from "constants/theme";
const { royalBlue, black } = theme.colors;
const { medium } = theme.typography.size;
const { display } = theme.typography.font.family;

const StyledRadioGroup = styled(Radio.Group)`
  width: 100%;
  margin-top: 0.5rem;
  text-align: left;
  .ant-radio-wrapper {
    justify-content: space-between;
    padding: ${(props) => props.padding};
    white-space: break-spaces;
    margin-left: -1.5rem;


    span.ant-radio + * {
      font-family: ${display};
      font-size: ${medium};
      color: ${black};
      letter-spacing: 0;
    }
    .ant-radio-inner {
      border-color: ${royalBlue};
      border-width: 0.2rem;
      width: 2.5rem;
      height: 2.5rem;
      &::after {
        background-color: ${royalBlue};
        top: 0.2rem;
        left: 0.2rem;
      }
    }
  }
`;

const RadioGroup = ({
  options,
  onChange,
  value,
  defaultValue,
  flex,
  padding,
}) => {
  return (
    <StyledRadioGroup
      size="large"
      flex={flex}
      padding={padding}
      onChange={onChange}
      value={value}
      defaultValue={defaultValue}
    >
      {options.map((option, index) => (
        <Radio value={option.stateKey} key={index}>
          {option.value}
        </Radio>
      ))}
    </StyledRadioGroup>
  );
};

export default RadioGroup;

Navigation.js

import React, { useState, useReducer } from "react";
import styled from "styled-components";
import RadioModal from "components/Feedback/RadioModal";
import RadioGroup from "components/Feedback/RadioGroup";

const renderRadioModal = () => {
    const inputLabelsText = [
      {
        stateKey: "age",
        label: "What is your age?",
      },
    ];

    const radioButtonOptions = [
      {
        stateKey: "covidImpact",
        value: "I go to work/school normally",
      },
      {
        stateKey: "covidImpact",
        value: "I am healthy but in a stay-at-home quarantine",
      },
      {
        stateKey: "covidImpact",
        value: "I have mild symptoms but haven't been tested",
      },
      {
        stateKey: "covidImpact",
        value: "I am diagnosed with Covid-19",
      },
    ];

    const RadioGroupWithLabel = withLabel(() => (
      <RadioGroup
        onChange={true}
        options={radioButtonOptions}
        value={true}
        padding="1rem 1rem"
        size="large"
      ></RadioGroup>
    ));

    return (
      <RadioModal
        maskClosable={true}
        closable={true}
        visible={radioModal}
        onClose={() => closeRadioModal()}
        transparent
      >
        <h2 className="title">We are almost done!</h2>
        {inputLabelsText.map((label, index) => (
          <>
            <StyledInput
              key={index}
              label={label.label}
              value={label.stateKey}
              onChange={dispatchAction}
            ></StyledInput>
            <RadioGroupWithLabel label={"How has COVID-19 impacted you?"} />
          </>
        ))}
        <FeedbackSubmitButton
          title="Submit Feedback"
          onClick={closeRadioModal}

        ></FeedbackSubmitButton>
      </RadioModal>
    );
  };

Answer 1

You have onChange={true} and value={true}. You need to handle the onChange and value properly. The value prop needs to match the value in your options that you pass into the radio group.

The options you pass in should be in the structure [{ value, label }, { value, label }]

Then in your onChange you need to handle setting that value + have a place to store it