Untitled

update the below code so that on state change, we filter the contacts and make a list of contacts for the selected state in the state dropdown(can be captured using event.target.value)
then update the contacts datatable with the filtered contact list. 
then update the SelectedStateDesc with the slected state's desc.
then call renderAnswers




   import React, { useEffect } from 'react';
import { Selectbox, Label, DataTable, Card } from '@d-lift/uxcomponents';
import { Lift, useAppState, Util } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil';
import _ from 'lodash';
import webService from '@/Services/AdminService';
import PropTypes from 'prop-types';

const RespondingState = ({ renderAnswers, collectionData, setSelectedStateDesc }) => {
    const [originalContacts, setOriginalContacts] = useAppState('originalContacts', undefined);
    const [stateResp, setStateResp] = useAppState('stateResp', { state: undefined });
    const [contacts, setContacts] = useAppState('contacts', []);
    const [showContacts, setShowContacts] = useAppState('showContacts', false);

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

    const onPageLoadHandler = async () => {
        try {
            Lift.spinner.show();

            const response = await webService.fetchContacts();

            if (response?.data && !_.isEmpty(response?.data)) {
                // filter the contacts which are from states present in collection data, or
                setOriginalContacts();
                setContacts();
            }
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleStateChange = () => {
        if (stateResp.state !== ConstantKeys.DEFAULT_OPTION.LIFT_default) {
            let filteredList = [];
            originalContacts.forEach((item) => {
                let state = item.state?.split(',');
                if (
                    state?.includes(filter.state) ||
                    !filter.state ||
                    filter.state === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    filter.state === ConstantKeys.REF_VALUE.ALL
                ) {
                    filteredList.push(item);
                }
            });
            setContacts(filteredList);
            const selectedStateDescription = Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.STATE,
                stateResp.state,
            );
            setSelectedStateDesc(selectedStateDescription); // to set collection state name
            renderAnswers(stateResp.state); // to set the response provided by selected state
        } else {
            setContacts(originalContacts);
            setSelectedStateDesc('');
        }
        setShowContacts(true);
    };

    return (
        <Card className="mt-3 w-100 ux-rfi-grey-bg">
            <Selectbox
                id="state"
                labelKey="state"
                list="filteredStates"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                model="stateResp.state"
                className="w-100"
                defaultOptionLabelKey="select_state"
                defaultOption="true"
                onChange={handleStateChange}></Selectbox>
            <Label labelKey="contacts"></Label>
            <div className="ux-rfi-contact-table">
                <DataTable
                    showIf={showContacts}
                    col-data-keys="email,name"
                    col-default-headers="Email,Name"
                    datacollection="contacts"
                    keyField="email"
                    hover="false"
                    striped={false}
                    emptymsg-key="no_records_found"
                    className="va-contacts-table"
                    pagination="default"
                    pagination-size-per-page="5"
                />
            </div>
        </Card>
    );
};

RespondingState.propTypes = {
    renderAnswers: PropTypes.func.isRequired,
    collectionData: PropTypes.object.isRequired,
};

export default RespondingState;