How to hide the OK and Cancel buttons of antd Modal?

I wrote a Signup component, which is basically as follows: const Login = ( <Modal> <NormalLoginForm/ ... </NormalLoginForm > </Modal> ) The NormalLoginForm component is from...

Antd: How to override style of a single instance of a component

I'm using webpack to import the antd.less file in a global App.less file. Then I override some global styles and webpack bundles everthing: // App.less @import "~antd/dist/antd.less"; @import...

how to get field value on change for FormItem in antd

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly. say this is the item for...

action function is required with antd upload control, but I dont need it

I am using ant design components and I have an upload input: https://ant.design/components/upload/ According to the documentation, action is required on the props. However I dont need the file to...

React submit form on select change event

I'm using ant design. I have a form. In that form I have submit button and select dropdown. when I click submit button it triggers the form submit action. I need to submit form and get values on...

How to remove default tooltip from menu item in collapsable state with sidebar?

How to remove default tooltip from a menu item in a collapsible state with sidebar? It seems like the same question asked in the ant design GitHub also, but no response. Code and screenshot...

Ant Design - Make Menu Uncollapsable/Unfoldable

I am using Ant Design with React. Ant Design has a menu component: https://ant.design/components/menu/ Is it possible to make the menu uncollapsable/unfoldable? I read the documentation, and there...

How to get value from Select/Option component from Ant design

I want to retrieve the value from my selection so I can make post requests. I have no problem getting from text input, but for some reason I can't get it from the drop down menu select. I end up...

React-datepicker with a Formik form

I'm trying to use react-datepicker in a Formik form. I have: import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class Fuate extends React.Component...

Multi-select with Select all Option in ANTD React

I have a form in which there is a multi select dropdown antd component . On change of the select all option , I need to select all the options available with max of 5 tags . Please find the link...

NextJS - export is broken (no CSS, no JS)

I am using NextJS (https://nextjs.org/) Version 9.0.6. My next.config.js looks like this: /* eslint-disable */ const withLess = require("@zeit/next-less"); const lessToJS =...

How to make a responsive grid, using Ant Design?

I try to follow this documentation, but i can't make this work. I want to make the boxes break into one column for small screens, just like the follow examples. Into Do i have to use css...

defaultValue of Input not working correctly on ant design

I am using ant design on my project. I get data from redux store with useEffect like this; const settingsRedux = useSelector(state => state.SETTINGS) after that I use this data for defaultValue...

Alternative for document.querySelector in react js

I've red many articles about using useRef in react js. According to [react js documentation][1], Refs provide a way to access DOM nodes or React elements created in the render method.. From all...

How can I add ellipsis for overflowing text within AntDesign's Table component?

Problem: When using AntDesign's Table component, I've set the width of each cell and when the text overflows, I would like the text to cutoff and show an ellipsis. The end goal is to have the...

Is there any way we can export the Antd table data into an excel sheet on button click with reactjs

I am new to reactjs. I got a scenario in which the Antd table data need to be exported to an excel sheet on a button click. Is there any default options available with Antd? or we need to do some...

Ant Design, Hide Pagination when there is the only page

According to the documentation (first FAQ of Table documentation) I have the next code: <Table key={index + plant.name} columns={setColumns(plant.name, plant.id)} ...

Conditional rendering of a Form.Item on Ant design

I'm trying to make a form using Ant design v4.0. The display of an Form.Item (Input text) depends of the value of other Form.Item (Radio button group). I'm using form.getFieldValue('fieldname')...

React: antd change dark or light theme on runtime

There is a similar question posted in stack overflow, but the posted answer cannot help me. I have followed the steps, but there is no effect. Basically, I have no idea where to put this...

Variable "$file" got invalid value {}; Upload value invalid

I am using GraphQLClient from graphql-request to send requests to my server. I am trying to upload a file by doing the following: const graphQLClient = new...

Antd Form with React hook form

I am trying to use antd form with react-hook-form but couldn't get it to work. Basically I am using a theme with antd and want to integrate react-hook-form for better validation and other things....

Ant design checkbox react hook forma validation

this is my jsx: <Form.Item name="agreement" validateStatus={errors.agreement ? 'error' : 'success'} help={errors.agreement?.message} ...

Ant Design TreeSelect map data from API to title value keys

I am trying to populate a Tree Select in ANT Design from API, the API Response type is so projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

How to use react-draggable for modal using ant-design?

I decided to use the react-draggable npm package for my modal window using ant-design, (for those who don't know react-draggable, this is a simple component for making elements draggable). But I...

AntDesign select menu, want to only show part of the option when selected

So i have this AntDesign Select menu <CustomSelect defaultValue={weeklyImp} dropdownMatchSelectWidth={180} dropdownStyle={{textAlign: "center"}} onChange={handleWeeklyImpChange}> <Option...

ant design progress bar. Using steps prevents full width

I cant seem to create a full-width progress bar with steps. It works normally with the normal progress bar. <Progress percent={50} /> <br /> <Progress percent={50} steps={3} /> Example...

How to get values of modal form antd

I'm trying to create a form inside modal using react class component and antd, but i couldn't find a way to get the data submited in the form. i tried to console the event of the onOk in antd...

Ant design onFinish function with typescript; Type '(values: FormData) => void' is not assignable to type '(values: unknown) => void'

I have interface FormData, which is supposed to be same type as values that onFinish function receives, but when I put const onFinish = (values: FormData) => { I get error Type '(values:...

Not working Server side rendering Styled-Components with Next JS

I tried to solve my problem through code and debug, but I couldn't figure out the cause, so I posted a question, and attached _document.js and _app.js and babel contents. In addition applied...

How to get values when include antd Table in Form.Item?

I have struggled for several hours today. However, I still cannot fix this problem. I'm now using React and Ant Design Form to post data, but I cannot get any data from Form.Item if I put Table...