Ant d switch doesnot work in form item
import React from 'react';
import { Form, Switch } from 'antd';
interface SwitchInputProps {
label: string;
name: string;
size?: 'default' | 'small'; // Make size prop accept only specific values
}
const SwitchInput = ({ label, name, size }: SwitchInputProps) => {
return (
<Form.Item
name={name}
valuePropName=""
>
<div style={{ display: 'flex' }}>
<h4 style={{ marginRight: "10px" }}>{label}</h4>
<Switch size={size} />
</div>
</Form.Item>
);
};
export default SwitchInput;
when used this it is returning the value as undefined
22 Replies
Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're facing is likely due to the
valuePropName prop in your Form.Item being set to an empty string. This prop is used to define which property of the form-controlled component (in this case, the Switch) should be used as the value for form data. For a Switch component, this should be "checked".
Here's how you should modify your code:
This way, the value of the Switch (whether it's on or off) will be correctly captured in the form data.
For more information on how to use forms in refine, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
deep-jade•10mo ago
@kapa.ai wat did u modify ?
Let me check the knowledge base for you. One moment! :books:
----------------------
I modified the
valuePropName prop in your Form.Item component. Initially, it was set to an empty string (""), which means it wasn't correctly mapping to any property of the Switch component.
I changed it to "checked", like so:
The valuePropName prop is used to specify which property of the form-controlled component (in this case, the Switch) should be used as the value for form data. For a Switch component, this should be "checked", as this property indicates whether the switch is on (true) or off (false).
By setting valuePropName to "checked", the form data will correctly reflect the state of the Switch component.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
deep-jade•10mo ago
any thought on this?
const onFinishHandler = async (data: any) => {
console.log(data)
await onFinish({
...data,
createdBy: identity.username
})
}when consoled i m getting the value of all the switch wheter seleted or not undefined
national-gold•10mo ago
hello @jash.s
Form.Item's first child should be input
like this
<Form.Item
<Switch>
deep-jade•10mo ago
<Form.Item
name={[name]}
valuePropName="checked"
>
<Switch size={size} />
</Form.Item> by this if it is false it is returing undefined
and wat needs to be done if i need to style it @alicanerdurmaz
national-gold•10mo ago
you can give className to switch components or you can use design tokens
https://ant.design/components/switch
name field is string. I guess it's wrong. switch should be boolean
Switch - Ant Design
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
deep-jade•10mo ago
wat about the undefined one ?
@alicanerdurmaz
national-gold•10mo ago
I don't understand undefined one case. switch has 2 case. true or false
deep-jade•10mo ago
for the above if i click on the save button without toggling the switch the it consoles undefined as the value @alicanerdurmaz
national-gold•10mo ago
hmm. can you double check please, form item name prop is correct ?
<Form.Item
name={[name]}
valuePropName="checked"
>
<Switch size={size} />
</Form.Item> by this if it is false it is returing undefined
deep-jade•10mo ago
yes
so it is like if the user comes on the page and doesnot change or toogle the switch the value is undefined but if the user toogles it then it will return true or false on the toogled
national-gold•10mo ago
I don't think it's possible. antd switch only can be true or false.
you can use another state and keep track of "users is changed to toggle" if it's not you can modify form values and send undefined
deep-jade•10mo ago
so it is like for the first time if the user comes in and doesnot change the value of switch or checkbox then refine is not able to read the value @alicanerdurmaz
Only after can changes it will read the value
national-gold•10mo ago
its not related to refine and its not the case ofc you can read value
I guess I mis understood something. if you can reproducible code example I can try to debug
deep-jade•10mo ago
import { Create, SaveButton, useForm } from '@refinedev/antd';
import { useGetIdentity, useNavigation } from '@refinedev/core';
import { ProductForm } from 'components/products/productForm';
const ProductCreate = () => {
const { list } = useNavigation()
const { data: identity }: any = useGetIdentity()
const {
saveButtonProps,
onFinish,
formLoading,
formProps
} = useForm({
})
const onFinishHandler = async (data: any) => {
console.log(data)
await onFinish({
...data,
createdBy: identity.username
})
}
return (
<Create title="Create a New Product" saveButtonProps={saveButtonProps} footerButtons={({ saveButtonProps }) => (
<>
<SaveButton
{...saveButtonProps}
>
Save
</SaveButton>
</>
)}
>
<ProductForm
onFinish={onFinish}
formLoading={formLoading}
onFinishHandler={onFinishHandler}
formProps={formProps}
/>
</Create>
)
}
export default ProductCreate
import React from 'react';
import { FormProps } from 'interfaces/interface';
import TextInput from 'components/textInput';
import { Card, Checkbox, Col, Form, Row, Switch } from 'antd';
import TextAreaInput from 'components/textAreaInput';
import SwitchInput from 'components/switch';
export const ProductForm = ({
onFinish,
formLoading,
onFinishHandler,
formProps,
}: FormProps) => {
return (
<>
<Form {...formProps} onFinish={onFinishHandler} layout="vertical">
{/* Product Information */}
<Card style={{marginBottom:"10px"}}>
<h2>Product Information</h2>
<p style={{ borderBottom: '1px solid #DCDCDC', paddingBottom: '10px' }}>
This is the description
</p>
<Col xs={24} sm={12} lg={12}> <SwitchInput label="List the product on the product Registry" name="productSwitch" /> </Col> </Card> </Form> </> ); }; these are the 2 componets , if i do nothing on the ui and click on the save button then i will get undefined of the value of productSwicth @alicanerdurmaz
<Col xs={24} sm={12} lg={12}> <SwitchInput label="List the product on the product Registry" name="productSwitch" /> </Col> </Card> </Form> </> ); }; these are the 2 componets , if i do nothing on the ui and click on the save button then i will get undefined of the value of productSwicth @alicanerdurmaz
national-gold•10mo ago
its hard to copy paste code and reproduce but I created small example for you to get 3 diffrent state for Switch
https://codesandbox.io/p/sandbox/serene-thunder-49ctvm?embed=1&file=%2Fsrc%2Fpages%2Fposts%2Fedit.tsx%3A10%2C5
deep-jade•10mo ago
yes so undefined is a part right ?
@alicanerdurmaz
where is the true or false state ?
national-gold•10mo ago
when you remove If statements it will be true false or undefined
deep-jade•10mo ago
sorry but was not able to get you regarding the if statements
@alicanerdurmaz