ArrayInput with SimpleFormIterator and conditional inputs

Question

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.

paulito415 · Accepted Answer · 2020-02-21 15:34:54Z

2

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.

answered Feb 21, 2020 at 15:34

paulito415

2363 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ArrayInput with SimpleFormIterator and conditional inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related