Const SoaLineControlRow = ( item: SoaLine,

onStatusChange: (e: SelectChangeEvent<unknown>) => void,
onNoteChange: (note: string) => () => void
) => {
console.log('180', item)
const [note, setNote] = React.useState(item?.note || ""); //This causes error:"Rendered more hooks than during the previous render"
console.log('182', item)
// const note = item.note;

return [
item?.iSORef,
item?.description,
<ImplementationStatusSelect
fullWidth
variant="standard"
key="status"
value={item?.overallStatus}
onChange={onStatusChange}
/>,
<Row key="note">
<TextField
fullWidth
multiline
variant="standard"
placeholder="Write here ..."
value={item?.note}
onChange={e => setNote(e.target.value)}
/>
{note !== item?.note && <SaveButton onClick={onNoteChange(note)} />}
</Row>,
"Related policies: " + item?.relatedPolicies.length.toString(),
];
};

почему может падать эта ошибка?

Rendered more hooks than during the previous render.

у меня это должно вернуться в цикле const getflatrows = () => { const flatrows: any[] = []; console.log("data", data?.soa) data?.soa.map(item => { flatrows.push( SoaLineControlRow( item as SoaLine, () => handleStatusChangeSoaLine( item.id, item.relatedPolicies.map(pol => pol.controlInPolicy.id) ), handleNoteChangeSoaLine(item.id) ) ); console.log('flatrows filled: ', flatrows) item.relatedPolicies.map(pol => { flatrows.push( PolicyControlRow( pol as PolicyControl, handleStatusChangePolicyControl( pol.controlInPolicy.id, item as SoaLine ), handleNoteChangePolicyControl(pol.controlInPolicy.id) ) ); }); }); return flatrows; };

у меня ведь нет никакого условного рендеринга в чем может быть проблема тогда?

кто-то в курсе?)))

А теперь так же, но скриншотами. Разбираться мега трудно в коде в телеге

если из того цикла getflatrows убрать функцию SoalineControlRow(...) то ошибка не падает

Я вообще сомневаюсь в валидности всего этого

чего именно?