Pre-select Radio Button based on database data

[SabinePfanner]

We've got a from with several input types, two options have a group of inputs type="radio in which one is checked per default. The form is used to create a new plant and add it to the database, which works fine.

<Fieldset>
        <RadioButtonGroup>
          <RadioButtonLabel htmlFor="perennial-yes">
            Yes
            <RadioButton
              id="perennial-yes"
              name="perennial"
              type="radio"
              value="true"
            />
          </RadioButtonLabel>
          <RadioButtonLabel htmlFor="perennial-no">
            No
            <RadioButton
              id="perennial-no"
              name="perennial"
              type="radio"
              value="false"
              defaultChecked
            />
          </RadioButtonLabel>
        </RadioButtonGroup>
      </Fieldset>

As a next step we want to enable editing of existing plants and therefore load the form with the plant's data from the database. We currently struggle in changing the default data of the radio buttons to the plant's data load from the database.

One idea is to put the whole radio button into a ternary operator e.g.

<RadioButtonGroup>
     {data.perennial 
   ? (<><RadioButtonLabel htmlFor="perennial-yes">
            Yes
            <RadioButton
              id="perennial-yes"
              name="perennial"
              type="radio"
              value="true"
              checked
            />
          </RadioButtonLabel>
          <RadioButtonLabel htmlFor="perennial-no">
            No
            <RadioButton
              id="perennial-no"
              name="perennial"
              type="radio"
              value="false"
            />
          </RadioButtonLabel></>) 
      : (<><RadioButtonLabel htmlFor="perennial-yes">
            Yes
            <RadioButton
              id="perennial-yes"
              name="perennial"
              type="radio"
              value="true"
            />
          </RadioButtonLabel>
          <RadioButtonLabel htmlFor="perennial-no">
            No
            <RadioButton
              id="perennial-no"
              name="perennial"
              type="radio"
              value="false"
              checked
            />
          </RadioButtonLabel></>)}
 </RadioButtonGroup>

But maybe there is a smarter, easier solution for it?

Branch is: https://github.com/SabinePfanner/plants-app/tree/feature-create-plants

[doemser]

You can use the defaultChecked attribute, here is a simple prototype:

https://stackblitz.com/edit/vitejs-vite-wkjmey?file=src%2Fmain.jsx,src%2FApp.jsx&terminal=dev

Let met know if that helped