hide buttons from interface

Question

I have a modal, and this modal has two interfaces, the first is “QRReader” and the second is “PatientForm”, and the modal has two buttons, the first is “Approve” and the second is “Cancel”. And I want to hide the two buttons within the interface of the "QRReader"

How can i solve the problem?

And this file contains the entire modal, knowing that the BasicModal tag is modal

import { Button, Col, Row } from "antd";
import {
    useState
} from "react";
import { QrReader } from "react-qr-reader";
import patient from "../../../api/nuclearMedicineApi/services/Patient";
import { decrypt } from "../../../utils/decryption";
import PatientForm from "./form";
import { QrcodeOutlined } from '@ant-design/icons';
import BasicModal from "../modal";
import { FormattedMessage } from "react-intl";
import { notify } from "../notification";

const QRScanner = () => {
    const [data, setData] = useState<number>(0);
    const [patientInfoData, setPatientInfoData] = useState({})
    const [modelVisible, setModelVisible] = useState<any>();

    console.log('datadatadata: ', data)
  
    const openNotificationWithIcon = () => {
        // onSuccess: (data) => {
        notify('success', 'ok', 'approve-message');
        // },
    };
    

    return (
        <>
            <QrcodeOutlined
                className='cursor-pointer'
                style={{ fontSize: '2rem' }}
                color={'#fff'}
                onClick={(e) => {
                    e.stopPropagation()
                    setModelVisible(true)
                }}
            />
            <BasicModal
                header={<>
                    <h2 className='text-primary'><FormattedMessage id="qr-scanner" /></h2>
                </>}
                content={
                    <>

                        {
                            data !=0 ?
                                <PatientForm patientInfoData={patientInfoData} data={data} />
                                :
                                <Row>
                                    <Col span={18} offset={3}>

                                        <QrReader

                                            onResult={async (result: any, error) => {

                                                if (!!result) {
                                                    const t = result?.text;
                                                    const d = decrypt(t);
                                                    let zz: any = d.match(/(\d+)/)
                                                    Math.floor(zz[0])
                                                    setData(zz[0]);


                                                    const pationInfo = await patient.patientGet({ Id: Number(zz[0]) })
                                                    setPatientInfoData(pationInfo)
                                                }

                                                if (!!error) {
                                                    console.info(error);
                                                }
                                            }} // style={{ width: '100%' }}
                                            constraints={{ facingMode: 'user' }}
                                        // style={{ width: '100%' }}
                                        />

                                    </Col>
                                </Row>


                        }

                        <Row>
                            <Col span={1} offset={3}>
                                <Button
                                    type='primary'
                                    className='savebtn'
                                    onClick={() => {
                                        patient.switchToPresent(data || 0)
                                        openNotificationWithIcon()
                                    }}
                                >
                                    <FormattedMessage id={'approve'} />
                                </Button>
                            </Col>
                            <Col span={8} offset={4}>
                                <Button
                                    type='default'
                                    className='savebtn'
                                    onClick={() => {
                                        setModelVisible(false);
                                        setData(0);
                                    }}

                                >
                                    <FormattedMessage id={'cancel'} />
                                </Button>
                            </Col>
                        </Row>
                    </>
                }
                isOpen={modelVisible}
                footer={false}
                width='50vw'
                handleCancel={() => {
                    setModelVisible(false);
                }}
                afterClose={
                    () => setData(0)
                }
            />

        </>
    )
    
};

export default QRScanner;

Answer 1

You can have the same condition for showing the buttons which you have for QRScanner and PatientForm

  {data != 0 ? (
<Row>
                            <Col span={1} offset={3}>
                                <Button
                                    type='primary'
                                    className='savebtn'
                                    onClick={() => {
                                        patient.switchToPresent(data || 0)
                                        openNotificationWithIcon()
                                    }}
                                >
                                    <FormattedMessage id={'approve'} />
                                </Button>
                            </Col>
                            <Col span={8} offset={4}>
                                <Button
                                    type='default'
                                    className='savebtn'
                                    onClick={() => {
                                        setModelVisible(false);
                                        setData(0);
                                    }}

                                >
                                    <FormattedMessage id={'cancel'} />
                                </Button>
                            </Col>
                        </Row>
) : </>}

Answer 2

I think you should be able to use a similar condition as you are using to determine if you should render patientForm vs QRReader. You could wrap your buttons with something like this

{ data = 0 && (
  <Row>
    <Col span={1} offset={3}>
      <Button
        type='primary'
        className='savebtn'
        onClick={() => {
          patient.switchToPresent(data || 0)
          openNotificationWithIcon()
        }}
      >
        <FormattedMessage id={'approve'} />
      </Button>
    </Col>
    <Col span={8} offset={4}>
      <Button
        type='default'
        className='savebtn'
        onClick={() => {
          setModelVisible(false);
          setData(0);
        }}
      >
        <FormattedMessage id={'cancel'} />
      </Button>
    </Col>
   </Row>
  )
}