Untitled

the rowdata that is getting sent to renderResponse() is as following:
rowData={
    "id": 36003,
    "question": "Question 1 for AK RFI for testing attention needed",
    "answers": [
        {
            "id": 93755,
            "quesnId": 36003,
            "answer": "IL RESPONDED ",
            "respondDt": "2024-07-25T17:40:48.69381",
            "state": "IL"
        },
        {
            "id": 93750,
            "quesnId": 36003,
            "answer": "IL RESPONDED 2",
            "respondDt": "2024-07-25T17:40:48.69381",
            "state": "AK"
        }
    ]
}

Update the below code for renderResponse, so that the states list is displayed as a link, and on click of the states the state's respective answer will get displayed.
also update the code for toggleCard, as on click of header of one card all the cards are getting opened, it should only open the hiiden div for which click has happened.




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

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

    const toggleCard = () => {
        setExpanded(!expanded);
    };

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

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();
            //const response = await webService.fetchRfiCollection();
            let response = {
                catalogId: 551,
                title: 'dfsdf',
                description: 'gsdfgsdfgdsfg',
                rfiDetails: [
                    {
                        id: 23451,
                        questionsList: [
                            {
                                rfiId: 23451,
                                id: 36003,
                                question: 'Question 1 for AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93755,
                                        quesnId: 36003,
                                        answer: 'IL RESPONDED ',
                                        respondDt: '2024-07-25T17:40:48.69381',
                                        state: 'IL',
                                    },
                                    {
                                        id: 93750,
                                        quesnId: 36003,
                                        answer: 'IL RESPONDED 2',
                                        respondDt: '2024-07-25T17:40:48.69381',
                                        state: 'AK',
                                    },
                                ],
                            },
                            {
                                rfiId: 23451,
                                id: 36004,
                                question: 'Question 2 AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93753,
                                        quesnId: 36004,
                                        answer: 'Responded as Michigan',
                                        respondDt: '2024-07-25T15:50:54.130178',
                                        state: 'MI',
                                    },
                                ],
                            },
                            {
                                rfiId: 23451,
                                id: 36005,
                                question: 'Question 3 AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93802,
                                        quesnId: 36005,
                                        answer: 'gdfgdsfg',
                                        respondDt: '2024-07-26T11:42:54.20372',
                                        state: 'NH',
                                    },
                                ],
                            },
                            {
                                rfiId: 23451,
                                id: 36006,
                                question: 'Question 4 AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93803,
                                        quesnId: 36006,
                                        answer: 'gsdfgsdfgsdfg',
                                        respondDt: '2024-07-26T11:43:03.513999',
                                        state: 'NV',
                                    },
                                ],
                            },
                        ],
                        title: 'AK RFI for testing attention needed',
                        description: 'Description for AK RFI for testing attention needed',
                        reqDT: '2024-07-25T15:46:59.142912',
                        state: 'AR',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '07-26-2024',
                        offering: 'EE',
                    },
                    {
                        id: 23501,
                        questionsList: [
                            {
                                rfiId: 23501,
                                id: 36007,
                                question: 'Question MI',
                                description: '',
                                answers: [
                                    {
                                        id: 93754,
                                        quesnId: 36007,
                                        answer: 'IL RESPONDED ',
                                        respondDt: '2024-07-25T17:39:23.427467',
                                        state: 'IL',
                                    },
                                ],
                            },
                        ],
                        title: 'MI RFI Created Title',
                        description: '',
                        reqDT: '2024-07-25T17:05:21.534463',
                        state: 'MI',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '07-26-2024',
                        offering: 'EE',
                    },
                    {
                        id: 23551,
                        questionsList: [
                            {
                                rfiId: 23551,
                                id: 36008,
                                question: 'QUES1',
                                description: '',
                            },
                        ],
                        title: 'IL RFI',
                        description: '',
                        reqDT: '2024-07-25T17:38:19.4079',
                        state: 'IL',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '07-26-2024',
                        offering: 'EE',
                    },
                ],
            };

            //setCollectionData(response);
            processCollectionData(response);
            //setOriginalCollectionData(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 },
        });
    };

    const renderResponse = (colData, rowData, index) => {
        console.log('rowData', rowData);

        let stateList = [];
        rowData.answers?.forEach((value) => {
            stateList.push(value.state);
        });
        console.log('stateList', stateList);

        return stateList.join(',');
    };

    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 className="ux-rfi-light-green-border mt-3">
                            <div>
                                <div className="main-component">
                                    <div onClick={toggleCard} className="p-1">
                                        <Header header-size="4" preIconClass="fa fa-angle-down">
                                            {rfiDetail.title}
                                        </Header>
                                    </div>

                                    {expanded ? (
                                        <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>
                                    ) : (
                                        <></>
                                    )}

                                    <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>
                    ))}
                </>
            ) : (
                <></>
            )}
        </>
    );
};

export default QuestionResponse;