Данные, которые я использую, выглядят примерно так:
[ {id: 1, data: [{id: 2, name: 'test1'}, {id: 3, name: 'test1a'}]}, {id: 2, data: [{id: 4, name: 'test2'}, {id: 5, name: 'test2a'}]}, ]
так что это в основном массив объектов, где каждый объект имеет свойство id и name.
Идея состоит в том, чтобы каждый объект отображал строку со всеми элементами внутри поля данных объекта.
Для этого я использую этот компонент:
const OptionsRow = ({
options,
isSelected,
handleAnswerSelect,
handleEdit,
fetchLoading,
}) => {
const { t } = useTranslation();
if (!options || !options.length) {
return (
<div className="OptionsRow" />
);
}
// eslint-disable-next-line no-console
console.log(options);
return (
<div className="OptionsRow">
{
options.map((oArr, i) => {
// eslint-disable-next-line no-console
console.log(oArr);
// it logs this to console in the prod, but it returns nothing - works in development
return (
<div key={`option-index-${oArr.id}`}>
<div className="step-indicator">
{`${t('Korak')}: ${oArr.id}`}
</div>
<div className="Options-row">
{
// eslint-disable-next-line arrow-body-style
oArr.data.map(o => {
// eslint-disable-next-line no-console
console.log(o);
// doesnt log this in production
return (
<OptionItem
key={`${o.id} - ${o.name}`}
isSelected={!!isSelected(o.id)}
value={o}
handleSelectClick={() => handleAnswerSelect(o, i)}
handleEditClick={() => handleEdit(o)}
disabled={fetchLoading}
/>
);
})
}
</div>
</div>
);
})
}
</div>
);
};
Есть похожие вопросы по StackOverflow, но в большинстве случаев ответом был просто отсутствующий оператор return, который я использую правильно, как мне кажется. Этот компонент работает должным образом на моем локальном сервере разработки, но при развертывании в производственной среде JSX не отображается, последняя выполненная строка из компонента - console.log(oArr);
, и журнал оттуда выглядит нормально.