尝试根据 FieldArray 内部的条件渲染字段反应 JS

Question

I am trying to render the field based on condition that is passed to the component like as below

  return (
<FieldArray name={`spaceType.mechanicalData.${mappedLibrarySourceArray}`}>
  {({ fields }) => {
    const dataSource = fields.map((name, index) => ({
      rowKey: index,
      ...values.spaceType.mechanicalData[mappedLibrarySourceArray][index],
    { isProjectSystem && (select ( // getting error at this line (compile errors)
        <Field
          name="airSystem.isEquipmentIncluded"
          component={AntdCheckboxAdapter}
          type="checkbox"
          label="Included"
          disabled={isReadOnly}
        />
    )),
    },
      id: (
        <Field
          name={name}
          component={AntdSelectSectionAdapter}
          isProjectSystem={isProjectSystem}
          section={section}
          disabled={isReadOnly}
          placeholder="Select source"
          render={sourceRender}
        />
      ),
    }));
    return (
      <div>
        <Table
          columns={tableColumns}
          dataSource={dataSource}
          rowKey="rowKey"
        />
      </div>
    );
  }}
</FieldArray>

);

and i am not sure where i am doing wrong with above code and isProjectSystem is boolean variable passed onto this component

I am using react JS with final form adapters plugin Could any one please suggest any ideas on this that would be very grateful. thanks in advance

Answer 1

You could do:

const dataSource = fields.map((name, index) => ({
  rowKey: index,
  ...values.spaceType.mechanicalData[mappedLibrarySourceArray][index],
  select: isProjectSystem ? (
    <Field
      name="airSystem.isEquipmentIncluded"
      component={AntdCheckboxAdapter}
      type="checkbox"
      label="Included"
      disabled={isReadOnly}
    />
  ) : null,
  id: (
    <Field
      name={name}
      component={AntdSelectSectionAdapter}
      isProjectSystem={isProjectSystem}
      section={section}
      disabled={isReadOnly}
      placeholder="Select source"
      render={sourceRender}
    />
  ),
}));

that will have the select property there regardless. Alternately, you could change your map to conditionally add that property after.

const dataSource = fields.map((name, index) => {
  const output = {
    rowKey: index,
    ...values.spaceType.mechanicalData[mappedLibrarySourceArray][index],
    id: (
      <Field
        name={name}
        component={AntdSelectSectionAdapter}
        isProjectSystem={isProjectSystem}
        section={section}
        disabled={isReadOnly}
        placeholder="Select source"
        render={sourceRender}
      />
    ),
  };

  if (isProjectSystem) {
    output.select = (
      <Field
        name="airSystem.isEquipmentIncluded"
        component={AntdCheckboxAdapter}
        type="checkbox"
        label="Included"
        disabled={isReadOnly}
      />
    );
  }

  return output;
});