Search code examples
reactjsantd

appeare third field based on condition

I have a project and in this project I have several interfaces and among these interfaces there is an interface to create an index and I have three fields, the first is the name and the second is the type and I have 20 types, and I want when the type is 11 or 14 to show me a third field which is “RefId”:

enter image description here

import React from 'react';
import FormElement from '../../../../common/form-element';
import { IFormProps } from '../../../../../interfaces/form-props';
import { Col, Row } from 'antd';
import Index from '../../../../../api/nuclearMedicineApi/services/Index';
import { useQuery } from 'react-query';
import { useIntl } from 'react-intl';

interface IndexFormProps extends IFormProps { }

const IndexForm: React.FC<IndexFormProps> = ({
    control,
    disabled,
    type,
    data
}) => {

    // console.log('data: ', data); 

    // Get All types
    const getAllIndexTypesQuery = useQuery('getAllIndexTypes', () =>
        Index.indexGetAllTypes(),
    );

    const getIndexGetAllLite = useQuery('getIndexGetAllLite', () =>
        Index.indexGetAllLite({ Type: data?.type?.value}),
    );

    const sharedProps = {
        control,
        disabled,
    };
    const { formatMessage } = useIntl();


    return (
        <div className='permissions p-8'>
            <Row>
                <Col span={24}>
                    <FormElement
                        {...sharedProps}
                        label={'indexName'}
                        type='input'
                        name={'name'}
                        required
                    />
                </Col>
                <Col span={24}>
                    <FormElement
                        {...sharedProps}
                        label={'indexType'}
                        type='select'
                        name={'type'}
                        options={
                            getAllIndexTypesQuery.data?.map((op) => ({
                                ...op,
                                label: formatMessage({ id: op?.label }),
                            }))
                        }
                        required
                    />
                </Col>
                {
                    // (data?.type?.value === 13 || data?.type?.value === 14 || data?.type?.label === 'SubTopography' || data?.type?.label === 'SubCity') ?
                    (type=== 'Create' && data?.type?.value === 13 || data?.type?.value === 14) ?
                    <Col span={24}>
                        <FormElement
                            {...sharedProps}
                            label={'refId'}
                            type='select'
                            name={'refId'}
                            options={
                                getIndexGetAllLite.data?.items?.map((op) => ({
                                    ...op,
                                    label: formatMessage({ id: op.label }),
                                }))
                            }
                            required
                        />
                    </Col>: ''
                }


                {type !== 'Create' && (
                    <>
                        <Col span={24} className={"m-8"}>
                            <FormElement
                                {...sharedProps}
                                label={'isActive'}
                                type='checkbox'
                                name='isActive'
                                disabled
                            />
                        </Col>
                    </>
                )}
            </Row>
        </div>
    );
};

export default IndexForm;
Solution

  • you could hande this with an onChange event and a state like "hasExtraField" to render extra field.

    const Page = () => {
  const [hasExtraField, setHasExtraField] = useState(false);
  const handleOnChange = (id) => {
    if(id === 14 || id === 11) {
      setHasExtraField(true);
    }
  }


  return (

    <>  
      {...yourOtherFields}
      {hasExtraField && <input name="extraField" />}
    </>
  )
}