Untitled

update the below code to handle and dispay multiple category and programs. currently if we are getting one program its getting displayed, bit if we get multiple values like in the below response, we are unable to display the programs and category in the below code.
{
    "timestamp": "2024-06-21T06:27:24.216126400Z",
    "message": {
        "code": 200,
        "notify": false
    },
    "data": [
        {
            "id": 17101,
            "title": "RFI Title 2024 for multiple programs",
            "description": "RFI Title 2024 for multiple programs desc",
            "reqDT": "2024-06-21T11:57:06.577788",
            "state": "CT",
            "programs": "MA,LIHEAP",
            "category": "EG,FO",
            "status": "SB",
            "dueDT": "07-05-2024",
            "offering": "EE"
        }
    ],
    "correlationId": "EC650551B6B9441A8A86E42E774B7B62"
}



code:::

import React from 'react';
import { Button, Label, Column, Header, Row, Para } from '@d-lift/uxcomponents';
import { Util } from '@d-lift/core';

const RFIDetails = ({ rfi, responseStats, updatedDueDt }) => {
    return (
        <>
            <div className="ux-rfi-grey-border w-100 mt-3">
                <Header className="pt-3 ux-rfi-font-header" size="2">
                    {rfi.title}
                </Header>
                <Row>
                    <Column className="col-9">
                        <Row className="d-flex flex-wrap">
                            <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label">
                                {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)}
                            </Para>

                            {/* handle this for multiple cattegory */}
                            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                {Util.getRefTableDescriptionByCode('CATEGORY', rfi.category)}
                            </Para>

                            {/* handle this for multiple program */}
                            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                {Util.getRefTableDescriptionByCode('PROGRAM', rfi.programs)}
                            </Para>
                        </Row>
                    </Column>

                    <Column>
                        <div className="ux-rfi-grey-border">
                            <Label
                                labelKey="requested_by"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">
                                {Util.getRefTableDescriptionByCode('STATE', rfi.state)}
                            </Para>
                            <Label
                                labelKey="due"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{updatedDueDt}</Para>
                            <Label
                                labelKey="responses"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{responseStats}</Para>
                            <div className="m-0 p-1">
                                <Button
                                    id="summarizeBtn"
                                    size="small"
                                    className="ux-rfi-green-button"
                                    // click={}
                                    labelKey="summarize_btn"></Button>
                            </div>
                        </div>
                    </Column>
                </Row>
            </div>

            <div className="ux-rfi-grey-border w-100 mt-3">
                <Para className="mt-2 scrollable-content">
                    {rfi.description ? (
                        rfi.description
                    ) : (
                        <h4 className="text-muted">Description Not available!!</h4>
                    )}
                </Para>
            </div>
        </>
    );
};

export default RFIDetails;