Conditional Tab/FormTab rendering in TabbedShowLayout/TabbedForm

user_2146269 0
Viewed 848

I would like to display a Tab inside the TabbedShowLayout only if the record has a specific property. I tried to create a custom component as below:

const EventsTab = ({...props, record}) => {
  return record && record.hasEvents &&
  <Tab label="Tab2">
    test
  </Tab>
}

and then add it inside the Show layout as:

<Show {...props}>
  <TabbedShowLayout>
    <Tab label="Tab1">
      <MetricsComp {...props} />
    </Tab>
    <EventsTab {...props}/>
  </TabbedShowLayout>
</Show>

but I get the following error: uncaught at finalize Invariant Violation: EventsTab(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Admin-on-rest allows conditional rendering of a component (like in How to access record's internals in Show/Edit/Create) but not a Tab. Is there any workaround?

admin-on-rest
2 Answers

I am not sure and I may be being presumptuous but you component EventsTab will basically return a boolean and not a valid react component. Is the below what you are looking for?

const EventsTab = ({...props, record}) => {
  return record ? record.hasEvents ?
  (<Tab label="Tab2">
    test
  </Tab>): null: null
}
user_62848610
Related