Dynamically render input boxes based on fetched API results without useState?

[risafj]

Hi @bluebill1049 and everyone, thanks for this great library 😄

I have a question about registering checkboxes dynamically based on an API call.
The Sandbox is self-explanatory, but basically what I'm trying to do is:

1. Call API for data (like below) necessary for rendering a list of checkboxes

[
  { id: 1, name: "cats", label: "Cats", value: true },
  { id: 2, name: "dogs", label: "Dogs", value: false },
  { id: 3, name: "parrots", label: "Parrots", value: false }
];

2. Render some checkboxes based on the fetched data

  const petCheckboxes = petsData.map(petData => (
    <li key={petData.id}>
      <input
        type="checkbox"
        defaultChecked={petData.value}
        name={petData.name}
        ref={register}
        id={petData.id}
      />
      <label htmlFor={petData.id}>{petData.label}</label>
    </li>
  ));

Right now, I'm storing the result of the API call in const [petsData, setPetsData] = useState([]);. But this implementation seems messy to me because I don't actually need petsData stored - I'm only using it to trigger the petsData.map(). React Hook Form is the one that keeps track of the state of the checkboxes.
My question is, is there a better way to do this so there's need for useState?

[bluebill1049]

I think you will need useState with this because you need a refresh when API resolves.

[risafj]

@bluebill1049 Got it. Thank you for your quick response!