React: How to set Ant Design radio buttons to be checked depending on multiple object key/value pairs?

My state is set up so that

initialState = {      hasRead: false,     hasDrawn: false,     hasWritten: false   }  

I'm using Ant Design for radio buttons, and want a particular radio to be "checked" depending on which keys are true and which are false. I have currently tried this in the following manner:

    import { useState} from "react";      import { Radio } from "antd";            const initialValues = {        hasRead: false,        hasDrawn: false,        hasWritten: false      };            export default function App() {        const [radioState, setRadioState] = useState(initialValues);              const handleChange = (e) => {          setRadioState(e.target.value);        };                  return (           <div>            <Radio.Group onChange={handleChange}>              <Radio                className="radio-buttons"                checked={                  radioState.hasRead === false &&                  radioState.hasDrawn === false &&                  radioState.hasWritten === false                }                value=              >                User has completed 0 tasks              </Radio>              <Radio                className="radio-buttons"                checked={                  radioState.hasRead === true &&                  radioState.hasDrawn === false &&                  radioState.hasWritten === false                }                value=              >                User has read              </Radio>              <Radio                className="radio-buttons"                checked={                  radioState.hasRead === true &&                  radioState.hasDrawn === true &&                  radioState.hasWritten === false                }                value=              >                User has read and drawn              </Radio>              <Radio                className="radio-buttons"                checked={                  radioState.hasRead === true &&                  radioState.hasDrawn === true &&                  radioState.hasWritten === true                }                value=              >                User has read, drawn, and written              </Radio>            </Radio.Group>           </div>        );      }  

The state is structured this way on purpose so that I can easily pass it into a particular API call, but I can't figure out why this isn't working. Any insight would be appreciated, thank you!

https://stackoverflow.com/questions/66880312/react-how-to-set-ant-design-radio-buttons-to-be-checked-depending-on-multiple-o March 31, 2021 at 09:06AM