function VotingRadioQuestion()

in projects/inclusive_ai_a_chatgpt_plugin_and_dao_to_engage_marginalized_groups_in_ai/Inclusive.AI app/website/src/components/VotingIntro.tsx [24:111]
79 lines of code
5 McCabe index (conditional complexity)

function VotingRadioQuestion(props: VotingRadioQuestionProps) {
  const { question, choices, answer, goToNext } = props

  const [value, setValue] = useState('')
  const [error, setError] = useState(false)
  const [complete, setComplete] = useState(false)
  const [helperText, setHelperText] = useState('')

  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value)
    setHelperText(' ')
    setError(false)
  }

  const handleSubmit = useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault()

      if (value === answer) {
        setHelperText('You selected the correct answer!')
        setError(false)
        setComplete(true)
      } else if (value === '') {
        setHelperText('Please select an option.')
        setError(true)
      } else {
        const answerLabel = choices.find((x) => x.value === answer)
        setHelperText(`Correct answer: ${answerLabel ? answerLabel.label : ''}`)
        setError(true)
        setComplete(true)
      }
    },
    [answer, choices, value],
  )

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 650, margin: '0 auto' }}>
      <FormControl sx={{ p: 3 }} error={error} variant="standard">
        <FormLabel id={question} sx={{ mb: 1 }}>
          {question}
        </FormLabel>
        <RadioGroup
          aria-labelledby={question}
          value={value}
          onChange={handleRadioChange}
        >
          {choices.map((choice) => (
            <FormControlLabel
              key={choice.value}
              value={choice.value}
              control={<Radio />}
              label={choice.label}
            />
          ))}
        </RadioGroup>
        <Button type="submit" variant="outlined" sx={{ mt: 1 }}>
          Check Answer
        </Button>
        <Typography variant="body1" fontWeight="bold" mt={1}>
          {helperText}
        </Typography>
        {complete && (
          <Button
            type="button"
            variant="outlined"
            color="info"
            onClick={goToNext}
            aria-label="Go next"
            sx={{ mt: 2 }}
          >
            Next
          </Button>
        )}
      </FormControl>
    </form>

    // <RadioGroup defaultValue={props.choices[0].value}>
    //   {props.choices.map((choice) => (
    //     <RadioFormControlLabel
    //       key={choice.value}
    //       value={choice.value}
    //       label={choice.label}
    //       control={<Radio />}
    //     />
    //   ))}
    // </RadioGroup>
  )
}