Использование функции в свойстве рендеринга Material-Table

Question

Мне нужно использовать пользовательскую функцию в свойстве визуализации столбца Material-Table. Функция вызывается, я получаю на консоли ожидаемые результаты, однако результат просто не будет отображаться в таблице. Вот код:

import React from 'react';
import HraReferenceDataContext from '../context/hraReferenceData/hraReferenceDataContext';
import MaterialTable from 'material-table';

const EmployeeDetailsCompanyDocuments = ({ companyDocumentsData }) => {
    const hraReferenceDataContext = React.useContext(HraReferenceDataContext);
    const { companyDocumentTypes } = hraReferenceDataContext;

    const getDocumentTypeForRow = id => {
        companyDocumentTypes.forEach(type => {
            if (type.id === id) {
                console.log(type.name)
                return type.name;
            }
        });
    };

    const columnInfo = [
        {
            field: 'typeId',
            title: 'Type',
            render: rowData =>{ getDocumentTypeForRow(rowData.typeId)}, //here is the problem
        },
        { field: 'created', title: 'Created On' },

    ];

    return (
              <MaterialTable
                 columns={columnInfo}
                 data={companyDocumentsData}
                 title="Company Documents List"
               />   
    );
};

Answer 1

Возврат внутрь forEach не работает.

изменить эту функцию

const getDocumentTypeForRow = id => {
        companyDocumentTypes.forEach(type => {
            if (type.id === id) {
                console.log(type.name)
                return type.name;
            }
        });
    };

на

const getDocumentTypeForRow = id => {
  return companyDocumentTypes.find(type => type.id === id).name;
};

обновить

изменить

render: rowData =>{ getDocumentTypeForRow(rowData.typeId)},

на

render: rowData => getDocumentTypeForRow(rowData.typeId),

, поскольку вы должны вернуть значение, возвращаемое из getDocumentTypeForRow.