Transform prop on <Edit> gives React warning

[JoshuaHintze]

What you were expecting:
Not to have a warning

What happened instead:
I added a simple function to an tag. Currently using the next branch 1.9.0-beta 3 with typescript.

Steps to reproduce:
Use the following code:

<Edit {...props} aside={<UserAside />} transform={(value) => {
	   console.log(value);
	   return value;
	}}>

Error Received:

Warning: Invalid value for prop `transform` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
    in div (created by EditView)
    in EditView (created by Edit)
    in Edit (at user.edit.tsx:29)
    in UserEdit (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.tsx:31)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (at Layout.tsx:16)
    in Unknown (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at App.tsx:17)
    in App (at src/index.tsx:9)
    in StrictMode (at src/index.tsx:8)

Environment

• React-admin version: 1.9.0 beta 3
• Last version that did not exhibit the issue (if applicable):
• React version: 16.13.1
• Browser: Chrome
• Stack trace (in case of a JS error):

[fzaninotto]

Thanks for reporting the bug!

[soullivaneuh]

@fzaninotto Still have the same error as @GimpMaster using react-admin v3.11.0.

Here is the related code, I think it's related:

export const RideEdit: FC<EditProps> = (props) => {
  const transform: EditProps['transform'] = ({
    status,
    customer,
    driver,
    totalPrice,
    steps,
    ...rest }) => ({
      steps: steps.map(({ children, ...stepRest}: any) => stepRest),
      ...rest,
    });

  return (
    <Edit
      title={<RideTitle />}
      transform={transform}
      {...props}
    >
      <RideForm />
    </Edit>
  );
}

Or may I missing something? 🤔

Error stack trace:

Warning: Invalid value for prop `transform` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 
div
EditView@http://localhost:4000/static/js/0.chunk.js:142703:17
RecordContextProvider@http://localhost:4000/static/js/0.chunk.js:105152:18
SaveContextProvider@http://localhost:4000/static/js/0.chunk.js:106055:18
EditContextProvider@http://localhost:4000/static/js/0.chunk.js:105953:18
Edit@http://localhost:4000/static/js/0.chunk.js:142432:79
RideEdit
WithPermissions@http://localhost:4000/static/js/0.chunk.js:103191:20
Route@http://localhost:4000/static/js/0.chunk.js:199056:29
Switch@http://localhost:4000/static/js/0.chunk.js:199258:29
ResourceContextProvider@http://localhost:4000/static/js/0.chunk.js:111470:18
ResourceRoutes@http://localhost:4000/static/js/0.chunk.js:111338:14
Resource@http://localhost:4000/static/js/0.chunk.js:111408:12
Route@http://localhost:4000/static/js/0.chunk.js:199056:29
Switch@http://localhost:4000/static/js/0.chunk.js:199258:29
RoutesWithLayout@http://localhost:4000/static/js/0.chunk.js:111514:18
div
main
div

[fzaninotto]

Right, this is a regression introduced by #5604. Reopening this issue.

[rvrolijk]

Thank you for fixing this in the next update.
I just wanted to inform you that the same thing occurs for the Create component.

[sergey-ovsiannikov]

hello, now it reproduced for ra-form-layout

Warning: Invalid value for prop `transform` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 
    at div
    at http://localhost:3000/static/js/bundle.js:41639:66
    at Portal (http://localhost:3000/static/js/bundle.js:46252:5)
    at ModalUnstyled (http://localhost:3000/static/js/bundle.js:45305:7)
    at Modal (http://localhost:3000/static/js/bundle.js:72443:82)
    at http://localhost:3000/static/js/bundle.js:41639:66
    at Dialog (http://localhost:3000/static/js/bundle.js:59388:83)
    at EditDialogView (http://localhost:3000/static/js/bundle.js:133901:74)
    at EditDialog (http://localhost:3000/static/js/bundle.js:133883:81)
    at FormDialogButton (http://localhost:3000/static/js/bundle.js:134137:76)
    at EditInDialogButton (http://localhost:3000/static/js/bundle.js:134071:22)
    at AttachmentEdit (http://localhost:3000/static/js/bundle.js:3442:5)
    at div
...

[fzaninotto]

@sergey-ovsiannikov I can't reproduce it in the form-layout Storybook. Would you mind building a reproduction?

By the way, as ra-form-layout is an Enterprise Edition package, you're probably a subscriber, so I recommend that you use the EE support email to communicate with the core team - the conversation will be faster.