0

Recebo o seguinte array de uma 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,
      },
    ],
  },
];

Preciso iterar e mostrar o array options como radio buttons. Estou iterando o array exam da seguinte forma:

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

Estou utilizando o unform (https://unform.dev/examples/radio) para registrar os inputs.

O componenten RadioInput é este do gist abaixo, copiei da mesma forma como está no site com a documentação: https://gist.github.com/fredarend/b50103f73ba682510bf951326620250e

Porém tenho várias dúvidas, o id do array options é do tipo number e não string, eu não possuo itens no array options chamados value e nem label, somente id e option. Não estou conseguindo entender qual a forma correta de implementar esse componente.

1 Resposta 1

1

Fiz alguma alterações aqui no código

o App ficou da seguinte forma:

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>
        );
      })}
    </>
  );
}

Tem que englobar toda aplicação, por conta dessa biblioteca @unform/web

E no seu RadioInput fiz as seguites alterações:

Mudei sua interface já que o id é do type number, alterei o label por option e removi o value

Você pode alterar a sua interface pra se adequar ao seu array

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

Posteriormente ajustei o return do 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>
    ))}
  </>
);

O htmlFor quer receber uma string, então converti o id para string e fiz az demais alterações em defaultChecked(não precisa dele) e mudei o value para receber option

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .