Load related data in react-admin

Question

I have a form like below code. Based on the related record property that contains a field dataType, I want to show or hide some fields in the formProvider.

// src.js
export const PropCreate = (props) => (
<Create {...props}>
  <SimpleForm>

    <ReferenceInput
      label="Property"
      source="definitionId"
      reference="properties"
    >
      <SelectInput optionText="name" />
    </ReferenceInput>

    <FormDataConsumer>
      {({ formData, ...rest }) => (
        <React.Fragment>
          <NumberInput source="intValue" {...rest} />
          <TextInput source="stringValue" {...rest} />
          <NumberInput source="doubleValue" {...rest} />
          <LongTextInput source="textValue" {...rest} />
        </React.Fragment>
      )}
    </FormDataConsumer>
  </SimpleForm>
</Create>
)

What should I do in the FormDataConsumer to get the full propertyrecord? I can't find an example how to load the property record from the server or the redux store and perform logic wit it.

Answer 1

I had the same issue and what I came up with is to load all the referenced resources in componentDidMount and use SelectInput instead of ReferenceInput. That way, you can refer to the same loaded resources in FormDataConsumer.