Dynamically generated material UI Radio buttons not clickable

user_7431582 0
Viewed 798

Link to the demo: https://codesandbox.io/s/material-demo-9fwlz

While it seems like this code should have checkable radio elements, it does not. Any thoughts on what is broken? This is derived from the material-ui demo snippet, and the only modification is that the radio elements within the RadioGroup are dynamically generated from input props.

export default function RadioButtonsGroup(props) {
  const [value, setValue] = React.useState(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Gender</FormLabel>
      <RadioGroup
        aria-label="gender"
        name="gender1"
        value={value}
        onChange={handleChange}
      >
        {props.options.map(([value, readable], index) => (
          <FormControlLabel
            key={index}
            value={value}
            control={<Radio />}
            label={readable}
          />
        ))}
      </RadioGroup>
    </FormControl>
  );
}
material-ui typescript reactjs
2 Answers

Casual, I'm just an idiot. 

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

the type of event.target.value is string. My values are numbers. 

const handleChange = (e) => {
  setValue(Number(e.target.value));
}

Lovely, that value turning into a string and all.

user_74315820

If you value is a number then convert this number into string using toString()

<FormControlLabel
key={index}
value={value.toString()}
control={<Radio />}
label={readable}
/>
user_102381250
Related