Untitled

currently im getting the error: common_modules-node_…f622.bundle.js:2490 
 Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map')

update the below code using ?(null check) etc to add a check that no undefined values are getting rendered.

import ConstantKeys from '@/Constants/ConstantKeys';
import { Para, Header, DataTable } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import { Lift, useAppState, Util } from '@d-lift/core';
import catalogService from '@/Services/CatalogService';
import _ from 'lodash';

const QuestionResponse = ({}) => {
    const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');
    const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
    const [expandedCard, setExpandedCard] = useAppState('expandedCard', null);
    const [selectedAnswers, setSelectedAnswers] = useAppState('selectedAnswers', '');

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

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

            let response = await catalogService.fetchRfiCollection({
                requestBody: { catalogId: 551 },
            });


            processCollectionData(response);
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    const processCollectionData = (responseData) => {
        const formattedCollectionData = [];
        if (!_.isEmpty(responseData) && !_.isEmpty(responseData.rfiDetails)) {
            responseData.rfiDetails.forEach((data) => {
                let table = [];
                table = data.questionsList?.map((question) => ({
                    id: question?.id,
                    question: question?.question,
                    answers: question?.answers,
                }));

                formattedCollectionData.push(table);
            });
        }

        setCollectionData({
            ...responseData,
            ...{ formattedCollectionData: formattedCollectionData },
        });

        console.log('collectionData', collectionData);
        console.log('formattedCollectionData', formattedCollectionData);
    };

    const renderResponse = (colData, rowData, index) => {
        const currentAnswer = selectedAnswers[rowData.id];

        return (
            <div>
                {currentAnswer === undefined ? (
                    rowData.answers?.map((answer, idx) => (
                        <React.Fragment key={answer.id}>
                            <a
                                href="#"
                                onClick={(e) => {
                                    e.preventDefault();
                                    setSelectedAnswers((prev) => ({
                                        ...prev,
                                        [rowData.id]: answer.answer,
                                    }));
                                    console.log('inside setSelectedAnswers');
                                }}>
                                {answer.state}
                            </a>
                            {idx < rowData.answers.length - 1 && ', '}
                        </React.Fragment>
                    ))
                ) : (
                    <Para>{selectedAnswers[rowData.id]}</Para>
                )}
            </div>
        );
    };

    const toggleCard = (index) => {
        setExpandedCard(expandedCard === index ? null : index);
    };

    return (
        <>
            {collectionData ? (
                <>
                    <div className="ux-rfi-green-bg">
                        <Header
                            className="pt-1 ux-rfi-white-header"
                            size="1"
                            showIf={selectedStateDesc}>
                            {selectedStateDesc}
                        </Header>
                        <Header header-size="4" className="pt-1 ux-rfi-white-header">
                            {collectionData.title}
                        </Header>
                        <Para className="ux-rfi-white-font">{collectionData.description}</Para>
                    </div>

                    {collectionData?.rfiDetails.map((rfiDetail, index) => (
                        <div key={index} className="ux-rfi-light-green-border mt-3">
                            <div>
                                <div className="main-component">
                                    <div onClick={() => toggleCard(index)} className="p-1">
                                        <Header
                                            header-size="4"
                                            preIconClass={`${
                                                expandedCard == index
                                                    ? 'fa fa-angle-up'
                                                    : 'fa fa-angle-down'
                                            }`}>
                                            {rfiDetail.title}
                                        </Header>
                                    </div>

                                    {expandedCard === index && rfiDetail ? (
                                        <div className="col-9 pb-3">
                                            <Para
                                                labelKey="offering"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                Util.getRefTableDescriptionByCode(
                                                    ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                                    rfiDetail.offering,
                                                )}
                                            <br />
                                            <Para
                                                labelKey="program"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                Util.getRefTableDescriptionByCode(
                                                    ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                                    rfiDetail.programs,
                                                )}
                                            <br />
                                            <Para
                                                labelKey="category"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                Util.getRefTableDescriptionByCode(
                                                    ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                                    rfiDetail.category,
                                                )}
                                        </div>
                                    ) : null}

                                    <DataTable
                                        col-data-keys="question,response"
                                        col-default-headers="Question,Response"
                                        customContent={{
                                            Response: renderResponse,
                                        }}
                                        datacollection={
                                            'collectionData.formattedCollectionData[' + index + ']'
                                        }
                                        keyField="id"
                                        hover="false"
                                        bordered="true"
                                        striped="false"
                                        emptymsg-key="no_records_found"
                                        className="va-contacts-table"
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
                </>
            ) : null}
        </>
    );
};

export default QuestionResponse;