Untitled

1-UPDATE THE below code to correct the code structure so that only if we have data in collectionData then only load screeb elements.


import ConstantKeys from '@/Constants/ConstantKeys';
import {
    Para,
    Selectbox,
    Header,
    AccordianElement,
    Label,
    Accordian,
    DataTable,
    Row,
} from '@d-lift/uxcomponents';
import React from 'react';
import { useAppState } from '@d-lift/core';
import webService from '@/Services/AdminService';


const QuestionResponse = ({}) => {
    const [selectedStateDesc] = useAppState('selectedStateDesc', '');
    const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
    const [originalCollectionData, setOriginalCollectionData] = useAppState('originalCollectionData', undefined);

    useEffect(() => {
        getRfiCollection();
       
    }, []);

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();
            const response = await webService.fetchRfiCollection();
            setCollectionData(response);
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        {collectionData && (
            <>
            <div className="ux-rfi-green-bg">
                <Header className="pt-3 ux-rfi-white-header" size="1" showIf={selectedStateDesc}>
                    {selectedStateDesc}
                </Header>
                <Header
                    header-size="4"
                    className="pt-1 ux-rfi-white-header"
                    labelKey="state_summary_header"></Header>
                <Para className="ux-rfi-white-font">
                    This is the description text for this RFI Collection. Do not display if empty,
                    null, or blank.
                </Para>
            </div>

            <div className="ux-rfi-light-green-border mt-3">
                <Accordian id="outer-accordian-2">
                    <AccordianElement
                        labelKey="requirements_subHeader"
                        className="font-weight-bold">
                        <Row className="col-9 pl-4">
                            <Para
                                labelKey="offering"
                                className="ux-rfi-label-normal font-weight-bold "></Para>
                            <br />
                            <Para
                                labelKey="program"
                                className="ux-rfi-label-normal font-weight-bold"></Para>
                            <br />
                            <Para
                                labelKey="category"
                                className="ux-rfi-label-normal font-weight-bold"></Para>
                        </Row>
                        <DataTable
                            col-data-keys="question,response"
                            col-default-headers="Question,Response"
                            datacollection="contactList"
                            keyField="question"
                            hover="false"
                            bordered="true"
                            striped="false"
                            emptymsg-key="no_records_found"
                            className="va-contacts-table"
                        />
                    </AccordianElement>
                </Accordian>
            </div>
        </>
        ): (
            <Row className="d-flex justify-content-center text-center m-5 rfi-unauth-container">
                <Para
                    labelKey="unauthorized_msg"
                    className="ux-rfi-font font-weight-bold m-auto p-3"></Para>
            </Row>
        )}
        
    );
};

export default QuestionResponse;