chore: clarify error about children of Form.Item with name (ant-des…

…ign#38038)

* 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

* Update error message in test

* 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.

* Update tests for new error messages

Also improve the test names for some

* Further test message updates

Missed a couple messages

* Add short URLs

* Update test error messages

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: Ell Bradshaw <joelbr@tailormed.co>
Co-authored-by: afc163 <afc163@gmail.com>

components/form/FormItem/index.tsx

@@ -276,27 +276,31 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): 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', '`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://u.ant.design/#complex-form-item.',
+          );
           childNode = children;
         } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
           warning(
             !!(shouldUpdate || dependencies),
             'Form.Item',
-            '`children` of render props only work 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(

components/form/__tests__/index.test.tsx

@@ -192,14 +192,14 @@ describe('Form', () => {
     });
   });
 
-  it('`shouldUpdate` should work with render props', () => {
+  it('render functions require either `shouldUpdate` or `dependencies`', () => {
     render(
       <Form>
         <Form.Item>{() => null}</Form.Item>
       </Form>,
     );
     expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Form.Item] `children` of render props only work with `shouldUpdate` or `dependencies`.',
+      'Warning: [antd: Form.Item] A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.',
     );
   });
 
@@ -212,7 +212,7 @@ describe('Form', () => {
       </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.",
     );
   });
 
@@ -225,11 +225,11 @@ describe('Form', () => {
       </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(
       <Form>
         <Form.Item name="test">
@@ -239,7 +239,7 @@ describe('Form', () => {
       </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://u.ant.design/#complex-form-item.',
     );
   });
 
@@ -619,7 +619,7 @@ describe('Form', () => {
       </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.',
     );
   });