Untitled

im getting the values in rfi.offering, prgram and categories but its not displaying the values for them.


import React from 'react';
import {
    Button,
    Label,
    Column,
    Row,
    Accordian,
    AccordianElement,
    Para,
} from '@d-lift/uxcomponents';
import { Util, useAppState } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';

const RFIDetails = ({
    rfi,
    responseStats,
    updatedDueDt,
    summarizeResponse,
    updateSummarizeResponse,
}) => {
    const renderProgramCategoryValues = (values, refTableName) => {
        return values.split(',').map((value) => (
            <Para className="mt-2 mr-2 p-1 ux-rfi-label-normal" key={value}>
                {Util.getRefTableDescriptionByCode(refTableName, value)}
            </Para>
        ));
    };

    return (
        <>
            <Accordian id="accordian">
                <AccordianElement
                    className="font-weight-bold ux-rfi-font-header"
                    headerText={rfi.title}
                    initialState="show">
                    <Row>
                        <Column className="col-9">
                            <Para
                                labelKey="offering"
                                className="ux-rfi-label-normal font-weight-bold ">
                                {Util.getRefTableDescriptionByCode(
                                    ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                    rfi.offering,
                                )}
                            </Para>
                            <br />
                            <Para
                                labelKey="program"
                                className="ux-rfi-label-normal font-weight-bold">
                                {renderProgramCategoryValues(
                                    rfi.programs,
                                    ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                ).reduce((prev, curr) => [prev, ', ', curr])}
                            </Para>
                            <br />
                            <Para
                                labelKey="category"
                                className="ux-rfi-label-normal font-weight-bold">
                                {renderProgramCategoryValues(
                                    rfi.category,
                                    ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                ).reduce((prev, curr) => [prev, ', ', curr])}
                            </Para>
                        </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(
                                        ConstantKeys.REF_TABLE_NAMES.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">
                                    {!summarizeResponse ? (
                                        <Button
                                            id="summarizeBtn"
                                            size="small"
                                            className="ux-rfi-green-button"
                                            click={() => updateSummarizeResponse(true)}
                                            labelKey="summarize_btn"></Button>
                                    ) : (
                                        <Button
                                            id="responseBtn"
                                            size="small"
                                            className="ux-rfi-green-button"
                                            click={() => updateSummarizeResponse(false)}
                                            labelKey="response_btn"></Button>
                                    )}
                                </div>
                            </div>
                        </Column>
                    </Row>
                    <div className="ux-rfi-grey-border w-100 mt-3">
                        <Para className="mt-2 scrollable-content">
                            <div className="ux-rfi-table-container-desc">
                                {rfi.description ? (
                                    rfi.description
                                ) : (
                                    <h4 className="text-muted">Description Not available!!</h4>
                                )}
                            </div>
                        </Para>
                    </div>
                </AccordianElement>
            </Accordian>
        </>
    );
};

export default RFIDetails;