So, as the title says, I am using react-admin@^4.0.1 to create a dashboard. At some point, I wanted to add TabbedForm in my product edit section. But I could not make it work. Even I copied a minimalistic code to see if it is working, but no luck. The minimalistic code that I used a follows:
<Edit>
<TabbedForm>
<FormTab label="main">
<TextInput source="id" />
<TextInput source="body" />
</FormTab>
<FormTab label="main">
<TextInput source="id" />
<TextInput source="body" />
</FormTab>
</TabbedForm>
</Edit>
The above code gives the output as follows:
Cannot read properties of undefined (reading 'toString')
at FormTab (http://localhost:3000/static/js/bundle.js:135354:16)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Stack (http://localhost:3000/static/js/bundle.js:44198:87)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at CardContent (http://localhost:3000/static/js/bundle.js:25679:82)
at DefaultComponent (http://localhost:3000/static/js/bundle.js:135434:15)
at form
at FormGroupsProvider (http://localhost:3000/static/js/bundle.js:124243:15)
at FormProvider (http://localhost:3000/static/js/bundle.js:191367:5)
at RecordContextProvider (http://localhost:3000/static/js/bundle.js:122421:15)
at OptionalRecordContextProvider (http://localhost:3000/static/js/bundle.js:122650:12)
at Form (http://localhost:3000/static/js/bundle.js:124438:15)
at SimpleForm (http://localhost:3000/static/js/bundle.js:135410:15)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Paper (http://localhost:3000/static/js/bundle.js:40389:82)
at http://localhost:3000/static/js/bundle.js:12411:66
at Card (http://localhost:3000/static/js/bundle.js:25532:82)
at div
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at EditView (http://localhost:3000/static/js/bundle.js:134934:14)
at RecordContextProvider (http://localhost:3000/static/js/bundle.js:122421:15)
at SaveContextProvider (http://localhost:3000/static/js/bundle.js:122445:15)
at EditContextProvider (http://localhost:3000/static/js/bundle.js:122673:15)
at Edit (http://localhost:3000/static/js/bundle.js:135030:72)
at ProductEdit (http://localhost:3000/main.c0b5735e8eac78c89437.hot-update.js:817:92)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at ResourceContextProvider (http://localhost:3000/static/js/bundle.js:121565:15)
at Resource (http://localhost:3000/static/js/bundle.js:121574:13)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at ErrorBoundary (http://localhost:3000/static/js/bundle.js:169933:37)
at div
at main
at div
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Layout (http://localhost:3000/static/js/bundle.js:128684:13)
at div
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at CoreAdminRoutes (http://localhost:3000/static/js/bundle.js:121406:11)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at CoreAdminUI (http://localhost:3000/static/js/bundle.js:121482:15)
at AdminUI (http://localhost:3000/static/js/bundle.js:138084:19)
at Resources (http://localhost:3000/static/js/bundle.js:88:39)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:53363:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:53070:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:53383:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:129126:15)
at ResourceDefinitionContextProvider (http://localhost:3000/static/js/bundle.js:121223:18)
at NotificationContextProvider (http://localhost:3000/static/js/bundle.js:119021:15)
at I18nContextProvider (http://localhost:3000/static/js/bundle.js:119046:12)
at Router (http://localhost:3000/static/js/bundle.js:176928:15)
at HistoryRouter (http://localhost:3000/static/js/bundle.js:118579:15)
at InternalRouter (http://localhost:3000/static/js/bundle.js:118631:15)
at BasenameContextProvider (http://localhost:3000/static/js/bundle.js:118602:15)
at AdminRouter (http://localhost:3000/static/js/bundle.js:118611:14)
at QueryClientProvider (http://localhost:3000/static/js/bundle.js:174232:21)
at StoreContextProvider (http://localhost:3000/static/js/bundle.js:118948:12)
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:121253:19)
at AdminContext (http://localhost:3000/static/js/bundle.js:138102:12)
at App
After looking at the source code of FormTab, I fixed this issue by adding the value attribute of each FormTab (though I don't know what it means, there are no docs). But even after the workaround, I am having an output without tabs.
So, my question is, why cannot I use FormTab in the first place?