React Admin SelectInput component default value based on server response

Backend
1

I’m working with the React Admin framework and encountering a challenge with the SelectInput component. I have a dropdown containing multiple choices, and I need to set one of them as the default based on the data I receive from my server.

<FormDataConsumer>
  {({ formData, getSource, scopedFormData }) => {
    console.log(scopedFormData);
    console.log(options);
    return (
      <div style={{ display: "flex" }}>
        <div className={styles.container}>
          <SelectInput
            source={getSource("category")}
            onChange={(value) => handleChange(value)}
            label="Category"
            choices={options}
            optionText="title"
            optionValue="value"
            record={scopedFormData}
            inputText={displayText}
            clearAlwaysVisible={true}
            fullWidth
            required
          />
        </div>
      </div>
    );
  }}
</FormDataConsumer>

How can I ensure that the SelectInput automatically chooses the correct value when the component is first rendered? The backend returns data, and I would like one of the options in the dropdown to be pre-selected according to that information.

2

The default value should set automatically if your server data matches what SelectInput expects. Double-check that the field name in your server response exactly matches what you’re using in getSource(“category”). If your backend returns a different field name or nested structure, you’ll need to transform the data first. I’ve hit similar issues where you can explicitly set the defaultValue prop with the server response value, but React Admin usually handles this through the record prop when everything lines up right. Make sure your options array has an item with a value matching what the server returns for the category field.

3

try adding a defaultValue prop to your SelectInput. it can be tricky with async data, so pull from scopedFormData like this: defaultValue={scopedFormData?.category}. just make sure the server response matches what SelectInput wants.

4

Hmm, interesting issue! Are you sure the record prop has the category value when the component mounts? Sometimes there’s a timing issue where server data hasn’t loaded yet. What’s your console.log showing for scopedFormData?