appeare third field based on condition - reactjs

Question

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”:
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;

Answer 1

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" />}
</>
)
}