foreign-sapphire
foreign-sapphire10mo ago

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
kapa.ai
kapa.ai10mo ago
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:
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="checked"
>
<div style={{ display: 'flex' }}>
<h4 style={{ marginRight: "10px" }}>{label}</h4>
<Switch size={size} />
</div>
</Form.Item>
);
};

export default SwitchInput;
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="checked"
>
<div style={{ display: 'flex' }}>
<h4 style={{ marginRight: "10px" }}>{label}</h4>
<Switch size={size} />
</div>
</Form.Item>
);
};

export default SwitchInput;
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: ----------------------
kapa.ai
kapa.ai10mo ago
<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire
foreign-sapphire10mo ago
@kapa.ai wat did u modify ?
kapa.ai
kapa.ai10mo ago
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:
<Form.Item
name={{name}}
valuePropName="checked"
>
<Form.Item
name={{name}}
valuePropName="checked"
>
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: ----------------------
kapa.ai
kapa.ai10mo ago
<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire
foreign-sapphire10mo 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
sensitive-blue
sensitive-blue10mo ago
hello @jash.s Form.Item's first child should be input like this <Form.Item <Switch>
foreign-sapphire
foreign-sapphire10mo 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
sensitive-blue
sensitive-blue10mo 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
foreign-sapphire
foreign-sapphire10mo ago
wat about the undefined one ? @alicanerdurmaz
sensitive-blue
sensitive-blue10mo ago
I don't understand undefined one case. switch has 2 case. true or false
foreign-sapphire
foreign-sapphire10mo ago
for the above if i click on the save button without toggling the switch the it consoles undefined as the value @alicanerdurmaz
No description
sensitive-blue
sensitive-blue10mo 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
foreign-sapphire
foreign-sapphire10mo 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
sensitive-blue
sensitive-blue10mo 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
foreign-sapphire
foreign-sapphire10mo 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
sensitive-blue
sensitive-blue10mo 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
foreign-sapphire
foreign-sapphire10mo 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
sensitive-blue
sensitive-blue10mo 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
No description
foreign-sapphire
foreign-sapphire10mo ago
yes so undefined is a part right ? @alicanerdurmaz where is the true or false state ?
sensitive-blue
sensitive-blue10mo ago
when you remove If statements it will be true false or undefined
foreign-sapphire
foreign-sapphire10mo ago
sorry but was not able to get you regarding the if statements @alicanerdurmaz