Wsrtjtyk

I am actually doing a dashboard using React-Admin, and I discovered the <ShowController> who permits to use Material-UI components inside the Show View.

But my problem comes here, I used a <TabbedShowLayout> and it doesn't work really well. Let me explain :

<ShowController {...props}>

    {controllerProps =>

      <ShowView {...props} {...controllerProps}>

        <TabbedShowLayout {...controllerProps}>

          <Tab icon={<AssignIcon />}>

            <div>

              <TextField source="id" />

            </div>

          </Tab>

        </TabbedShowLayout>

      </ShowView>

    }

</ShowController>

Here is my actual code, and it displays nothing except the tab with the icon.
But if i remove the <div> component, it works.

I would like to know, if someone ever does that, and made it works.

Thanks by advance

The reason is properties inheritance is not "native", you have to do it manually. react-admin is doing it in each component.

When you insert a div element in a react-admin form or layout, you break this inheritance between Tab and TextField. The div is receiving props from parent Tab, but doesn't forward them to TextField.

One solution is to make a custom wrapper. In your case:

<ShowController {...props}>

    {controllerProps =>

      <ShowView {...props} {...controllerProps}>

        <TabbedShowLayout {...controllerProps}>

          <Tab icon={<AssignIcon />}>

            <CustomDiv>

              <TextField source="id" />

            </CusomDiv>

          </Tab>

        </TabbedShowLayout>

      </ShowView>

    }

</ShowController>

With

const CustomDiv = ({children, ...props}) => (

    <div>

        {

            React.Children.map(children, child => React.cloneElement(child, {...props, ...child.props}))

        }

    </div>

);