Implement radio Buttons using the unform library

Question

I get the following array of 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 display the array options like radio Buttons. I am iterating the Exam array as follows:

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

I’m using the unform (https://unform.dev/examples/radio) to register inputs.

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

However I have several questions, the id of the options array is of type number and not string, I have no items in the options array called value and not label, only id and option. I’m not getting the right way to implement this component.

Answer 1

I made some changes here in the code

the App was as follows:

export default function App() {
  function handleSubmit(data: any) {
    console.log(data);
  }
  return (
    <>
      {data.map((n) => {
        return (
          <Form onSubmit={handleSubmit} initialData={{ radio: n.id }}>
            <li key={n.id}>
              <p>{n.question}</p>
              <RadioInput name="User" options={n.options} />
            </li>
            <button type="submit">Open</button>
          </Form>
        );
      })}
    </>
  );
}

You have to include every application, on behalf of this library @unform/web

And in his RadioInput I made the following changes:

I changed your interface since id is from type number, changed the label for option and removed the value

You can change your interface to suit your array

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

Later I adjusted the return of RadioInput:

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

The htmlFor wants to receive a string, then I converted the id to string and made too many changes in defaultChecked(don’t need it) and changed the value to receive option