You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`authLoading`| Optional |`ReactNode`|| The component to render while checking for authentication and permissions |
69
+
|`children`| Optional *|`ReactNode`| - | The components that render the form |
70
+
|`render`| Optional *|`function`| - | Function to render the form, receives the editContext as argument |
71
+
|`actions`| Optional |`ReactNode`| - | Override the actions toolbar with a custom component |
72
+
|`aside`| Optional |`ReactNode`| - | Component to render aside to the main content |
73
+
|`className`| Optional |`string`| - | Passed to the root component |
74
+
|`component`| Optional |`elementType`/`string`|`Card`| Override the root component |
75
+
|`disableAuthentication`| Optional |`boolean`|`false`| Disable the authentication check |
76
+
|`error`| Optional |`ReactNode`|| The component to render when failing to load the record |
77
+
|`emptyWhileLoading`| Optional |`boolean`|`false`| Set to `true` to return `null` while the edit is loading |
78
+
|`id`| Optional |`string`/`number`| - | The id of the record to edit |
79
+
|`loading`| Optional |`ReactNode`|| The component to render while loading the record to edit |
80
+
|`mutationMode`| Optional |`'undoable' \| 'optimistic' \| 'pessimistic'`|`'undoable'`| Switch to optimistic or pessimistic mutations |
81
+
|`mutationOptions`| Optional |`object`| - | Options for the `dataProvider.update()` call |
82
+
|`offline`| Optional |`ReactNode`|| The component to render when there is no connectivity and the record isn't in the cache |
83
+
|`queryOptions`| Optional |`object`| - | Options for the `dataProvider.getOne()` call |
84
+
|`redirect`| Optional |`'list' \| 'show' \| false \| function`|`'list'`| Change the redirect location after successful update |
85
+
|`resource`| Optional |`string`| - | Override the name of the resource to edit |
86
+
|`sx`| Optional |`object`| - | Override the styles |
87
+
|`title`| Optional |`string`/`ReactNode`/`false`| - | Override the page title |
88
+
|`redirectOnError`| Optional |`'list' \| false \| function`|`'list'`| The page to redirect to when an error occurs |
89
+
|`transform`| Optional |`function`| - | Transform the form data before calling `dataProvider.update()`|
86
90
87
91
`*` You must provide either `children` or `render`.
88
92
@@ -200,6 +204,20 @@ const Aside = () => {
200
204
201
205
**Tip**: Always test the record is defined before using it, as react-admin starts rendering the UI before the `dataProvider.getOne()` call is over.
202
206
207
+
## `authLoading`
208
+
209
+
By default, `<Edit>` renders the `<Loading>` component while checking for authentication and permissions. You can display a custom component during this time via the `authLoading` prop:
210
+
211
+
```jsx
212
+
import { Edit } from'react-admin';
213
+
214
+
exportconstPostEdit= () => (
215
+
<Edit authLoading={<p>Checking for permissions...</p>}>
216
+
...
217
+
</Edit>
218
+
);
219
+
```
220
+
203
221
## `children`
204
222
205
223
The `<Edit>` component will render its children inside a `EditContext` provider, which the `save` function. Children can be any React node, but are usually a form component like [`<SimpleForm>`](./SimpleForm.md), [`<TabbedForm>`](./TabbedForm.md), or the headless [`<Form>`](./Form.md) component.
@@ -330,6 +348,41 @@ const PostEdit = () => (
330
348
);
331
349
```
332
350
351
+
## `error`
352
+
353
+
By default, `<Edit>` redirects to the list when an error happens while loading the record to edit. You can render an error component via the `error` prop:
354
+
355
+
```jsx
356
+
import { Edit } from'react-admin';
357
+
import { Alert } from'@mui/material';
358
+
359
+
exportconstPostEdit= () => (
360
+
<Edit
361
+
error={
362
+
<Alert severity="error">
363
+
Something went wrong while loading your post!
364
+
</Alert>
365
+
}
366
+
>
367
+
...
368
+
</Edit>
369
+
);
370
+
```
371
+
372
+
## `loading`
373
+
374
+
By default, `<Edit>` renders the children while loading the record to edit. You can display a component during this time via the `loading` prop:
375
+
376
+
```jsx
377
+
import { Edit, Loading } from'react-admin';
378
+
379
+
exportconstPostEdit= () => (
380
+
<Edit loading={<Loading />}>
381
+
...
382
+
</Edit>
383
+
);
384
+
```
385
+
333
386
## `mutationMode`
334
387
335
388
The `<Edit>` view exposes two buttons, Save and Delete, which perform "mutations" (i.e. they alter the data). React-admin offers three modes for mutations. The mode determines when the side effects (redirection, notifications, etc.) are executed:
@@ -637,6 +690,24 @@ Note that the `redirect` prop is ignored if you set an `onSuccess` callback of [
637
690
638
691
**Warning**: If you set [`queryOptions`](#queryoptions) meta without redirecting, make sure that [`mutationOptions`](#mutationoptions) meta is the same, or you will have data update issues.
639
692
693
+
## `redirectOnError`
694
+
695
+
By default, `<Edit>` redirects to the list when an error happens while loading the record to edit. You can change the default redirection by setting the `redirectOnError` prop:
696
+
697
+
-`'list'`: redirect to the List view (the default)
698
+
-`false`: do not redirect
699
+
- A function `(resource) => string` to redirect to different targets depending on the record
700
+
701
+
```jsx
702
+
import { Edit } from'react-admin';
703
+
704
+
exportconstPostEdit= () => (
705
+
<Edit redirectOnError={false}>
706
+
...
707
+
</Edit>
708
+
);
709
+
```
710
+
640
711
## `render`
641
712
642
713
Alternatively to `children`, you can use a `render` prop. It will receive the [`EditContext`](./useEditContext.md#return-value) as its argument, and should return a React node.
| `authLoading` | Optional | `ReactNode` | | The component to render while checking for authentication and permissions
50
-
| `children` | Optional | `ReactNode` | | The components rendering the record fields
51
-
| `render` | Optional | `(props: EditControllerResult<RecordType>) => ReactNode` | | Alternative to children, a function that takes the EditController context and renders the form
52
-
| `disable Authentication` | Optional | `boolean` | | Set to `true` to disable the authentication check
53
-
| `id` | Optional | `string` | | The record identifier. If not provided, it will be deduced from the URL
| `authLoading` | Optional | `ReactNode` | | The component to render while checking for authentication and permissions
50
+
| `children` | Optional | `ReactNode` | | The components rendering the record fields
51
+
| `render` | Optional | `(props: EditControllerResult<RecordType>) => ReactNode` | | Alternative to children, a function that takes the EditController context and renders the form
52
+
| `disable Authentication` | Optional | `boolean` | | Set to `true` to disable the authentication check
53
+
| `error` | Optional | `ReactNode` | | The component to render when failing to load the record
54
+
| `id` | Optional | `string` | | The record identifier. If not provided, it will be deduced from the URL
55
+
| `loading` | Optional | `ReactNode` | | The component to render while loading the record to edit
| `mutationOptions` | Optional | `ReactNode` | | The options to pass to the `useUpdate` hook
58
+
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache
59
+
| `queryOptions` | Optional | `object` | | The options to pass to the `useGetOne` hook
60
+
| `redirectOnError` | Optional | `'list' \| false \| function` | `'list'` | The page to redirect to when an error occurs
61
+
| `transform` | Optional | `string` | | Transform the form data before calling `dataProvider.update()`
59
62
60
63
## `authLoading`
61
64
62
-
By default, `<EditBase>` renders nothing while checking for authentication and permissions. You can provide your own component via the `authLoading` prop:
65
+
By default, `<EditBase>` renders the children while checking for authentication and permissions. You can display a component during this time via the `authLoading` prop:
63
66
64
67
```jsx
65
68
import { EditBase } from'react-admin';
@@ -121,6 +124,20 @@ const PostEdit = () => (
121
124
);
122
125
```
123
126
127
+
## `error`
128
+
129
+
By default, `<EditBase>` redirects to the list when an error happens while loading the record to edit. You can render an error component via the `error` prop:
130
+
131
+
```jsx
132
+
import { EditBase } from'react-admin';
133
+
134
+
exportconstPostEdit= () => (
135
+
<EditBase error={<p>Something went wrong while loading your post!</p>}>
136
+
...
137
+
</EditBase>
138
+
);
139
+
```
140
+
124
141
## `id`
125
142
126
143
By default, `<EditBase>` deduces the identifier of the record to show from the URL path. So under the `/posts/123/show` path, the `id` prop will be `123`. You may want to force a different identifier. In this case, pass a custom `id` prop.
**Tip**: Pass both a custom `id` and a custom `resource` prop to use `<EditBase>` independently of the current URL. This even allows you to use more than one `<EditBase>` component in the same page.
139
156
157
+
## `loading`
158
+
159
+
By default, `<EditBase>` renders the children while loading the record to edit. You can display a component during this time via the `loading` prop:
160
+
161
+
```jsx
162
+
import { EditBase } from'react-admin';
163
+
164
+
exportconstPostEdit= () => (
165
+
<EditBase loading={<p>Loading the post...</p>}>
166
+
...
167
+
</EditBase>
168
+
);
169
+
```
170
+
140
171
## `mutationMode`
141
172
142
173
The `<EditBase>` component exposes a save method, which perform a "mutation" (i.e. they alter the data). React-admin offers three modes for mutations. The mode determines when the side effects (redirection, notifications, etc.) are executed:
@@ -391,6 +422,24 @@ The default `onError` function is:
391
422
}
392
423
```
393
424
425
+
## `redirectOnError`
426
+
427
+
By default, `<EditBase>` redirects to the list when an error happens while loading the record to edit. You can change the default redirection by setting the `redirectOnError` prop:
428
+
429
+
-`'list'`: redirect to the List view (the default)
430
+
-`false`: do not redirect
431
+
- A function `(resource) => string` to redirect to different targets depending on the record
432
+
433
+
```jsx
434
+
import { EditBase } from'react-admin';
435
+
436
+
exportconstPostEdit= () => (
437
+
<EditBase redirectOnError={false}>
438
+
...
439
+
</EditBase>
440
+
);
441
+
```
442
+
394
443
## `render`
395
444
396
445
Alternatively, you can pass a `render` function prop instead of children. This function will receive the `EditContext` as argument.
0 commit comments