CODEWITHSUNDEEP
react-admin
vhello
vhello

Reputation: 57

ArrayInput with SimpleFormIterator and conditional inputs

Let's say I have the following array in my create form 

    const CreateDefaults = {Inputs: [{id: "ID1", param: "a"},{id: "ID2", param: "b"}]};

and then I want to show extra TextInput only when id==="ID2"

export const MyCreate = withStyles(myStyles)(({ classes, ...props }) => (
<Create {...props}>
  <SimpleForm defaultValue={CreateDefaults}>
    <ArrayInput source="Inputs" {...props}>
      <SimpleFormIterator {...props}>
        <DisabledInput source="id" />
        {/*this does not work*/}
        {this.id === "ID2" ? (<TextInput source="ParamValue"/>) :null}
      </SimpleFormIterator>
    </ArrayInput>
  </SimpleForm>
</Create>
));

How can I do something like that? I know that for the whole form, one can use FormDataConsumer. However, what can one do inside ArrayInput/SimpleFormIterator for each iteration?

How to access current object in iteration? I tried something like the answer given to the 'Custom Input do not receive record when inside ArrayInput' issue in the react-admin github page, but it still does not receive the record in custom input.

Upvotes: 3

Views: 2161

Answers (1)

paulito415
paulito415

Reputation: 236

From the latest documentation here, you can see that if you use FormDataConsumer that is within an ArrayInput, you have a parameter called scopedFormData that you can use to get the current record and dereference that to get whatever fields you need. It usually also goes hand in hand with the getSource function you can use when setting the source within your FormDataConsumer.

Upvotes: 2

Related Questions