Untitled

in the below code on the value update in the state dropdown the handleStateChange() function is not getting called. update the code so that this function gets called on the dropdown value change




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 _ from 'lodash';
import webService from '@/Services/AdminService';
import PropTypes from 'prop-types';

const RespondingState = ({ renderAnswers, collectionData, setSelectedStateDesc }) => {
    const [originalContacts, setOriginalContacts] = useAppState('originalContacts', []);
    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();

            console.log('collectionData inside onPageLoadHandler', collectionData);

            if (response?.data && !_.isEmpty(response?.data)) {
                setOriginalContacts(response.data);
                setContacts(response.data);
            }
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleStateChange = (event) => {
        const selectedState = event.target.value;
        setStateResp({ state: selectedState });

        if (selectedState !== ConstantKeys.DEFAULT_OPTION.LIFT_default) {
            const filteredList = originalContacts.filter((item) => {
                const states = item.state?.split(',');
                return (
                    states?.includes(selectedState) ||
                    !selectedState ||
                    selectedState === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    selectedState === ConstantKeys.REF_VALUE.ALL
                );
            });

            setContacts(filteredList);
            const selectedStateDescription = Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.STATE,
                selectedState,
            );
            setSelectedStateDesc(selectedStateDescription); // to set collection state name
            renderAnswers(selectedState); // 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={(event) => handleStateChange(event)}></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,
    setSelectedStateDesc: PropTypes.func.isRequired,
};

export default RespondingState;