How can I use React-Admin FormTab?

Viewed 54

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. Image with the output identical to simpleform So, my question is, why cannot I use FormTab in the first place?

0 Answers
Related