Help to implement radio buttons

[fredarend]

I get the following array from an API:

Array exam:

[
  {
    id: 2,
    question: 'Questão 1:',
    essay_question: false,
    value: '2.00',
    options: [
      {
        id: 1,
        option: 'Opção A',
        correct: false,
        question_id: 2,
      },
      {
        id: 4,
        option: 'Opção B',
        correct: true,
        question_id: 2,
      },
    ],
  },
  {
    id: 3,
    question: 'Questão 2:',
    essay_question: false,
    value: '2.00',
    options: [
      {
        id: 5,
        option: 'Opção A',
        correct: false,
        question_id: 2,
      },
      {
        id: 6,
        option: 'Opção B',
        correct: true,
        question_id: 2,
      },
    ],
  },
];

I need to iterate and show the array options as radio buttons. I am iterating over the exam array as follows:

{exam.map(e => (
  <li key={e.id} >
    <p>{e.question}</p>
    <RadioInput name="user" options={[e.options]} />
  </li>
))}

The RadioInput component is this one from the gist below, I copied it in the same way as it is on the website with the documentation: https://gist.github.com/fredarend/b50103f73ba682510bf951326620250e

However I have several doubts, the id of the options array is of type number and not string, I do not have items in the options array called value and neither label, only id and option. I am not able to understand what is the correct way to implement this component.

[jpedroschmitz]

Hey, @fredarend, the id was defined as a string for this example, but you can totally change it for a number or keep both.

I've cried this example using your code and data, check it out. Hope it helps 💜

[fredarend]

I ended up managing to solve it as follows:

In the RadioButton component I changed the types of data it receives via props to suit what I need:

interface Props extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  options: {
    id: number;
    option: string;
  }[];
}

In htmlFor I transformed the ID which is of type number to String. I also changed other values ​​to suit what I need.

        <label htmlFor={String(option.id)} key={option.id}>
          <input
            ref={ref => inputRefs.current.push(ref as HTMLInputElement)}
            type="radio"
            name={name}
            defaultChecked={defaultValue.includes(option.id)}
            value={option.id}
            {...rest}
          />
          {option.option}
        </label>

And where I render RadioButton I changed the way to send the props.

{exam.map(e => (
  <li key={e.id} >
    <p>{e.question}</p>
    <RadioInput name="user" options={e.options} />
  </li>
))}

[fredarend]

@jpedroschmitz, in the same form context, with the same options, have you ever implemented something to validate the radio buttons?

Generally I use Yup to validate forms, however, as in this context the "name" will always be different from the other, I can't find a way to validate it.

We need to validate if any of the options have not been checked.

[jpedroschmitz]

Hey @fredarend, you can map by the elements and check if there's any option selected.
If there's not, use the formRef.current.setFieldError method.

const handleSubmit: SubmitHandler<FormData> = (data) => {
  console.log(data);

  Object.entries(data).forEach((item) => {
    const [questionID, selectedOption] = item;

    if (selectedOption === "") {
      formRef.current?.setFieldError(
        questionID,
        "This question is required!"
      );
    }
  });
};

I've updated my example, you can find the complete code there.