From dd24502293a9f69a9f0e850b7cd3e0dd27920741 Mon Sep 17 00:00:00 2001 From: Joel Bradshaw Date: Fri, 14 Oct 2022 11:15:21 -0700 Subject: [PATCH 1/9] Clarify error about children of Form.Item with `name` This is a common error and the message as written was not very clear. This should be more helpful pointing people in the right direction --- components/form/FormItem/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index 878452b76d51..8e6b4e464fd4 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -279,13 +279,17 @@ function InternalFormItem(props: FormItemProps): React.Rea "`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.", ); if (Array.isArray(children) && hasName) { - warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.'); + warning( + false, + 'Form.Item', + 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://ant.design/components/form/#components-form-demo-complex-form-control.' + ); childNode = children; } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) { warning( !!(shouldUpdate || dependencies), 'Form.Item', - '`children` of render props only work with `shouldUpdate` or `dependencies`.', + '`children` of render props only works with `shouldUpdate` or `dependencies`.', ); warning( !hasName, From 2c002f42792d5821d5617031b8b6885526587a0d Mon Sep 17 00:00:00 2001 From: Joel Bradshaw Date: Fri, 14 Oct 2022 11:21:55 -0700 Subject: [PATCH 2/9] Update error message in test --- components/form/__tests__/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index a81e743edd3b..44e80c00dcb6 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -212,7 +212,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.', + 'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://ant.design/components/form/#components-form-demo-complex-form-control.', ); }); From b4259752904e4e750266a8fc9ed25c3c73688bde Mon Sep 17 00:00:00 2001 From: Joel Bradshaw Date: Fri, 14 Oct 2022 11:46:48 -0700 Subject: [PATCH 3/9] Clarify more error messages Referring to "render props" is confusing because the docs don't explain what that is, and it's not really a prop. --- components/form/FormItem/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index 8e6b4e464fd4..9b3ce27fb2d9 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -289,18 +289,18 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !!(shouldUpdate || dependencies), 'Form.Item', - '`children` of render props only works with `shouldUpdate` or `dependencies`.', + 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.', ); warning( !hasName, 'Form.Item', - "Do not use `name` with `children` of render props since it's not a field.", + "A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.", ); } else if (dependencies && !isRenderProps && !hasName) { warning( false, 'Form.Item', - 'Must set `name` or use render props when `dependencies` is set.', + 'Must set `name` or use a render function when `dependencies` is set.', ); } else if (isValidElement(children)) { warning( From 1c4c8014798b2652ebb415c519b301389016ad4a Mon Sep 17 00:00:00 2001 From: Joel Bradshaw Date: Fri, 14 Oct 2022 11:48:59 -0700 Subject: [PATCH 4/9] Update tests for new error messages Also improve the test names for some --- components/form/__tests__/index.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 44e80c00dcb6..6b015eb067f4 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -166,14 +166,14 @@ describe('Form', () => { }); }); - it('`shouldUpdate` should work with render props', () => { + it('render functions require either `shouldUpdate` or `dependencies`', () => { render(
{() => null}
, ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] `children` of render props only work with `shouldUpdate` or `dependencies`.', + 'Warning: [antd: Form.Item] `children` of render props only works with `shouldUpdate` or `dependencies`.', ); }); it("`shouldUpdate` shouldn't work with `dependencies`", () => { @@ -198,11 +198,11 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - "Warning: [antd: Form.Item] Do not use `name` with `children` of render props since it's not a field.", + "Warning: [antd: Form.Item] A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.", ); }); - it('children is array has name props', () => { + it('multiple children with a name prop', () => { render(
From b3755aa2c47f621f140b8e96c3632faa3c8a4216 Mon Sep 17 00:00:00 2001 From: Joel Bradshaw Date: Fri, 14 Oct 2022 11:50:39 -0700 Subject: [PATCH 5/9] Further test message updates Missed a couple messages --- components/form/__tests__/index.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 6b015eb067f4..f4f726ca1eb8 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -173,7 +173,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] `children` of render props only works with `shouldUpdate` or `dependencies`.', + 'Warning: [antd: Form.Item] A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.', ); }); it("`shouldUpdate` shouldn't work with `dependencies`", () => { @@ -610,7 +610,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] Must set `name` or use render props when `dependencies` is set.', + 'Warning: [antd: Form.Item] Must set `name` or use a render function when `dependencies` is set.', ); }); From 87e352d518472704b96d1457c3e253b36349d614 Mon Sep 17 00:00:00 2001 From: Ell Bradshaw Date: Thu, 20 Oct 2022 16:09:17 -0700 Subject: [PATCH 6/9] Add short URLs --- components/form/FormItem/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index 9b3ce27fb2d9..068818ec2dbe 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -276,13 +276,13 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !(shouldUpdate && dependencies), 'Form.Item', - "`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.", + "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps.", ); if (Array.isArray(children) && hasName) { warning( false, 'Form.Item', - 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://ant.design/components/form/#components-form-demo-complex-form-control.' + 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.' ); childNode = children; } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) { From cfda1326cc962a919d8d8360abf1cb7084567a52 Mon Sep 17 00:00:00 2001 From: Ell Bradshaw Date: Thu, 20 Oct 2022 16:15:24 -0700 Subject: [PATCH 7/9] Update test error messages --- components/form/__tests__/index.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index f4f726ca1eb8..2c355001458d 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -185,7 +185,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.", + "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps." ); }); @@ -212,7 +212,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://ant.design/components/form/#components-form-demo-complex-form-control.', + 'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.' ); }); From b91d412771c03d0c427d436a4a7687ba2562bad2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 4 Nov 2022 18:42:00 +0800 Subject: [PATCH 8/9] Apply suggestions from code review --- components/form/__tests__/index.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 2c355001458d..1480b2c3e99d 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -185,7 +185,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps." + "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps.", ); }); @@ -212,7 +212,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.' + 'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.', ); }); From 74bc37647aeda6e974351b43b338cf31a7ff723d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 4 Nov 2022 18:43:13 +0800 Subject: [PATCH 9/9] Apply suggestions from code review --- components/form/FormItem/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index 068818ec2dbe..4b538918f238 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -282,7 +282,7 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( false, 'Form.Item', - 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.' + 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.', ); childNode = children; } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {