There is a new solution that looks much cleaner: <Form id=”myForm”> … <Modal … footer={[ <Button form=”myForm” key=”submit” htmlType=”submit”> Submit </Button> ]} > <CustomForm /> </Modal> This works because of the Button’s form attribute. Browser support Original solution’s author: https://github.com/ant-design/ant-design/issues/9380
the syntax is updated in v4 new syntax is: setFields. | Set fields status | (fields: FieldData[]) => void example : form.setFields([ { name: ‘field-to-update’, errors: [‘error-string’], }, ]);
If modifying the app as suggested in Material-UI NextJS examples did not help, you can lazy load your component. This way you will force it to create styles only after the client-side is loaded. Guide to disable SSR for a component: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr import dynamic from ‘next/dynamic’ export const ComponentWithNoSSR = dynamic(() => import(‘./Component’), { ssr: … Read more
If you are using hooks you can add an useEffect with the code: useEffect(() => { form.setFieldsValue(defaultValues) }, [form, defaultValues]) Remember define the form value first: const [form] = Form.useForm() And remember to pass this form instance to the Form component: <Form form={form} layout=”vertical” name=”form-name” initialValues={defaultValues} onFinish={submitHandler} > In this form, you going to update … Read more
Edit: This answer is definitely outdated for current versions of next.js, check the other answers below. After multiple hours of research I found now finally the right solution and wanted to share it: .babelrc (no magic here) { “presets”: [“next/babel”], “plugins”: [ [ “import”, { “libraryName”: “antd”, “style”: true } ] ] } next.config.js: /* … Read more
Try giving the menu items you want on the right float: right via JSX styling or a CSS class. Example pulling the Navigation Three item to the right with JSX inline styling, style={{float: ‘right’}}: <SubMenu style={{float: ‘right’}} title={<span><Icon type=”setting” />Navigation Three – Submenu</span>}> <MenuItemGroup title=”Item 1″> <Menu.Item key=”setting:1″>Option 1</Menu.Item> <Menu.Item key=”setting:2″>Option 2</Menu.Item> </MenuItemGroup> <MenuItemGroup title=”Item … Read more
Just found it: Simply set pagination to false as below: return ( <Table rowKey=”id” columns={columns} dataSource={data} pagination={false} /> );
TL;DR Override <Upload/> default upload AJAX implementation with a simulated successful upload. Solution Demo: Full Answer It seems that you are trying to use andt‘s <Upload/> component simply as file selector, due to the fact that you append the file to formData by yourself. The reason for never hitting the point where status === “done” … Read more
Import the FormComponentProps import {FormComponentProps} from ‘antd/lib/form/Form’; Then have your component interface YourProps { test: string; } class YourComponent extends React.Component<YourProps & FormComponentProps> { constructor(props: YourProps & FormComponentProps) { super(props); … } } Then export the class using Form.create() export default Form.create<YourProps>()(YourComponent); The generic argument on Form.create casts the result to a React ComponentClass with … Read more
ESLint thinks you are defining a new component without setting any name to it. This is explained because ESLint cannot recognize the render prop pattern because you are not directly writing this render prop into a component, but into an object. You can either put the render prop directly into your jsx implementation of the … Read more