How to hide multiple fields in react-admin ShowView?

Question

I am trying to hide a set of fields based on the value of another field but the following will not display the conditional fields ever:

export const ServiceShow = (props) => (
<ShowController {...props}>
  {controllerProps =>
  <ShowView component="div" {...props} {...controllerProps}>
    <TabbedShowLayout>
      <Tab label="General">
        {controllerProps.record && controllerProps.record.maintenance &&
         controllerProps.record.maintenance.active &&
           <>
            <Alert severity="warning">Maintenance period active</Alert>
            <DateField label="Maintenance Start" src="maintenance.start" />
            <DateField label="Maintenance End" srvc="maintenance.end" />
            <TextField label="Maintenance Message" source="maintenance.msg" />
          </>
        }
     </Tab>
    </TabbedShowLayout>
  </ShowView>
  }
</ShowController>
);

The <Alert> is displayed just fine, but the Field components are not.
I'm very new to React so probably a simple thing.

Note:
If I put a single <TextField> as the conditional output then it will work but anything inside a React.Fragment or <div> for example, it doesn't work.

You can wrap the `Tab` instead of `React.Fragment`. And all seems good.. check what you have inside the `Field` components.. — Omer, Apr 19 '20 at 02:46
@Omer There are actually a lot more fields on that tab. I just want to hide a few of them. Sorry for not making that clear in my example. — vaizki, Apr 19 '20 at 18:07

score 0 · Accepted Answer · edited May 05 '20 at 11:26

The reason why Alert shows up and Fields not is because Fields require addtional props passed by react-admin direct parent, in that case, the Tab. <> should pass such props too, but looks like it's not. And thats why a single <TextField> as child renders correctly

You can create a component that pass the props downstream to childs.

export const ServiceShow = (props) => (
<ShowController {...props}>
  {controllerProps =>
  <ShowView component="div" {...props} {...controllerProps}>
    <TabbedShowLayout>
      <Tab label="General">
          <Maintenance/>
     </Tab>
    </TabbedShowLayout>
  </ShowView>
  }
</ShowController>
);

const Maintenance = props => (
    {props.record && props.record.maintenance && props.record.maintenance.active && 
        <>
            <Alert {...props} severity="warning">Maintenance period active</Alert>
            <DateField {...props} label="Maintenance Start" src="maintenance.start" />
            <DateField {...props} label="Maintenance End" srvc="maintenance.end" />
            <TextField {...props}label="Maintenance Message" source="maintenance.msg" />
        </>
    }
)

How to hide multiple fields in react-admin ShowView?

1 Answers1