Displayif inside Array

[uenokazuma]

How to added the DisplayIf inside an array

I have a function like this

function DisplayIf({ children, condition }) {
  const uniforms = useForm();
  return condition(uniforms) ? Children.only(children) : null;
}

And create it inside an array component

<ListField>
    <ListItemField name="$">
      <AutoField name="field1" />
        <DisplayIf condition={context => context.model.fieldA}>
            <TextField name="field2" />
          </DisplayIf>
        </section>
      </DisplayIf>
    </ListItemField>
</ListField>

It failed to display anything

When I checked the context, I need to added the index after the field name, so it should be look like this
context.model.fieldA[0]
but the problem is because the index is hardcoded as a 0. It will be showed to all of array if field1 in the first array has a value.
I want it showed depends on each an array.
How to resolved this

[radekmie]

Hey @uenokazuma. You can access the context.name to know "where" in the tree (i.e., in which list element) is the condition evaluated. Here's an example:

<ListField>
    <ListItemField name="$">
      <AutoField name="field1" />
        <DisplayIf condition={({ model, name }) => model.fieldA[name[name.length - 1]]}>
            <TextField name="field2" />
          </DisplayIf>
        </section>
      </DisplayIf>
    </ListItemField>
</ListField>

[uenokazuma]

Thank you @radekmie
I working in this for 2 days, but I don't know why when I know about the name. I just looking around to get the index from an array in the model that changed and compare it.
It's really funny when I see your answer
what am I doing