antd RadioButton not checked programatically - reactjs

Question

Using antd, I have a simple RadioGroup composed of three RadioButtons. Everything works I expect.
Additionally, I defined a button which is supposed to clear the selected button and revert the RadioGroup to the default. It is not working. The underlying data is OK, but the default RadioButton is not visually checked.
The rightmost RadioButton is the default. Selecting either of the other two and pressing the Clear button does not check the rightmost RadioButton.
I have looked at this issue for days and do not see my error. The code is a bit noisy because a database is invovled.
Codesandbox
import React, { useState, useEffect, Fragment } from 'react';
import { Radio } from 'antd';
import { ConsoleLog } from './consoleLog';
const RadioGroup = Radio.Group;
const App = () => {
const [filters, setFilters] = useState(false);
const initFilters = {
wireSizeId: { displayValue: '', type: 'num', dbKey: '' },
colorId: { displayValue: '', type: 'num', dbKey: '' },
insulationId: { displayValue: '', type: 'num', dbKey: '' },
wireTypeId: { displayValue: '', type: 'num', dbKey: '' },
solidStranded: { displayValue: '', type: 'num', dbKey: null },
copperAlum: { displayValue: '', type: 'num', dbKey: null },
};
useEffect(() => {
setFilters(initFilters);
}, []);
useEffect(() => {
if (filters) {
console.log('e1', filters);
}}, [filters]);
const handleClearFilters = () => {
console.log('clear1', filters);
setFilters(initFilters);
};
const handleCheckbox = (props) => {
console.log('checkbox', filters);
console.log('checkbox', props.target.name, props.target.value, props.target.id);
let updated = {};
updated[props.target.name] =
{ displayValue: props.target.id, type: 'num', dbKey: props.target.value };
console.log(updated);
setFilters({...filters, ...updated});
};
return (
(filters?<Fragment>
<ConsoleLog>Render</ConsoleLog>
<div>
<ConsoleLog>Radio {filters['solidStranded'].dbKey}</ConsoleLog>
<RadioGroup
name='solidStranded'
onChange={handleCheckbox}
defaultValue=''
>
<Radio
value='0'
id='Solid'
checked={filters['solidStranded'].dbKey === '0'}
>
Solid
</Radio>
<Radio
value='1'
id='Stranded'
checked={filters['solidStranded'].dbKey === '1'}
>
Stranded
</Radio>
<Radio
value=''
id='none'
checked={filters['solidStranded'].dbKey === null}
>
None
</Radio>
</RadioGroup>
</div>
<div>
<button onClick={handleClearFilters} >
Clear Filters
</button>
</div>
</Fragment>:null)
);
};
export default App;

Answer 1

Use value in RadioGroup instead checked attribute, value must be not null-able
import React, { useState, Fragment } from "react";
import { Radio } from "antd";
const RadioGroup = Radio.Group;
const App = () => {
const initFilters = {
wireSizeId: { displayValue: "", type: "num", dbKey: "" },
colorId: { displayValue: "", type: "num", dbKey: "" },
insulationId: { displayValue: "", type: "num", dbKey: "" },
wireTypeId: { displayValue: "", type: "num", dbKey: "" },
solidStranded: { displayValue: "", type: "num", dbKey: "-1" }, // change
copperAlum: { displayValue: "", type: "num", dbKey: null }
};
const [filters, setFilters] = useState(initFilters);
const handleClearFilters = () => {
setFilters(initFilters);
};
const handleCheckbox = (props) => {
setFilters({
...filters,
solidStranded: {
// change
displayValue: props.target.id,
type: "num",
dbKey: props.target.value
}
});
};
// the ternary operator isn't necessary now.
return filters ? (
<Fragment>
<div>
<RadioGroup
name="solidStranded"
onChange={handleCheckbox}
value={filters["solidStranded"].dbKey} // change
>
<Radio value="0" id="Solid">
Solid
</Radio>
<Radio value="1" id="Stranded">
Stranded
</Radio>
<Radio value="-1" id="none">
None
</Radio>
</RadioGroup>
</div>
<div>
<button onClick={handleClearFilters}>Clear Filters</button>
</div>
</Fragment>
) : null;
};
export default App;
https://codesandbox.io/s/chekbox-example-8vh07?file=/src/App.js