wger-project · armandoschianodicola · Aug 4, 2026
diff --git a/src/components/Calendar/Components/CalendarComponent.tsx b/src/components/Calendar/Components/CalendarComponent.tsx
@@ -25,7 +25,7 @@ export interface DayProps {
 const CalendarComponent = (props: { isStandalone?: boolean }) => {
     const [t] = useTranslation();
 
-    const currentDate = new Date();
+    const currentDate = useMemo(() => new Date(), []);
     const [currentMonth, setCurrentMonth] = useState(currentDate.getMonth());
     const [currentYear, setCurrentYear] = useState(currentDate.getFullYear());
 
@@ -133,7 +133,7 @@ const CalendarComponent = (props: { isStandalone?: boolean }) => {
                 setSelectedDay(todayWithData);
             }
         }
-    }, [isSuccess]);
+    }, [currentDate, days, isSuccess]);
 
 
     useEffect(() => {
@@ -246,4 +246,4 @@ const CalendarComponent = (props: { isStandalone?: boolean }) => {
     );
 };
 
-export default CalendarComponent;
+export default CalendarComponent;
diff --git a/src/components/Calendar/Components/CalendarDayGrid.tsx b/src/components/Calendar/Components/CalendarDayGrid.tsx
@@ -27,16 +27,16 @@ const CalendarDayGrid: React.FC<CalendarDayGridProps> = ({
 
     return (
         <Grid container spacing={1} rowSpacing={2}>
-            {weekDays.map((day, index) => (
-                <Grid size={12 / 7} key={`weekday-${index}`}>
+            {weekDays.map((day) => (
+                <Grid size={12 / 7} key={`weekday-${day}`}>
                     <Typography variant="body1" sx={{ fontWeight: 'bold', textAlign: 'center' }}>
                         {day}
                     </Typography>
                 </Grid>
             ))}
 
-            {days.map((day, index) => (
-                <Grid size={12 / 7} key={`day-${index}`} sx={{ display: 'flex', justifyContent: 'center' }}>
+            {days.map((day) => (
+                <Grid size={12 / 7} key={`day-${day.date.toISOString()}`} sx={{ display: 'flex', justifyContent: 'center' }}>
                     <CalendarDay
                         day={day}
                         currentMonth={currentMonth}
@@ -50,4 +50,4 @@ const CalendarDayGrid: React.FC<CalendarDayGridProps> = ({
     );
 };
 
-export default CalendarDayGrid;
+export default CalendarDayGrid;
diff --git a/src/components/Calendar/Components/Entries.tsx b/src/components/Calendar/Components/Entries.tsx
@@ -93,8 +93,8 @@ const Entries: React.FC<LogProps> = ({ selectedDay, isStandalone }) => {
                         </ListItem>
                         <Collapse in={openMeasurements} timeout="auto" unmountOnExit>
                             <List sx={{ pl: 4, pt: 0 }}>
-                                {selectedDay.measurements.map((measurement, key) => (
-                                    <ListItem key={key} dense>
+                                {selectedDay.measurements.map((measurement) => (
+                                    <ListItem key={`${measurement.date.toISOString()}-${measurement.name}-${measurement.unit}`} dense>
                                         <ListItemText
                                             primary={measurement.name}
                                             secondary={`${measurement.value} ${measurement.unit}`}
@@ -169,4 +169,4 @@ const Entries: React.FC<LogProps> = ({ selectedDay, isStandalone }) => {
     );
 };
 
-export default Entries;
+export default Entries;
diff --git a/src/components/Dashboard/RoutineCard.tsx b/src/components/Dashboard/RoutineCard.tsx
@@ -76,12 +76,12 @@ const DayListItem = (props: { dayData: RoutineDayData }) => {
             </ListItemButton>
 
             <Collapse in={expandView} timeout="auto" unmountOnExit>
-                {props.dayData.slots.map((slotData, index) => (
-                    <div key={index}>
-                        {slotData.setConfigs.map((setConfigData, index) => (
+                {props.dayData.slots.map((slotData) => (
+                    <div key={`slot-${slotData.setConfigs.map(({ slotEntryId }) => slotEntryId).join("-")}`}>
+                        {slotData.setConfigs.map((setConfigData) => (
                             <SetConfigDataDetails
                                 setConfigData={setConfigData}
-                                key={index}
+                                key={`set-config-${setConfigData.slotEntryId}-${setConfigData.exerciseId}`}
                                 rowHeight={"70px"}
                                 showExercise={true}
                             />

diff --git a/src/components/Exercises/forms/ExerciseAliases.tsx b/src/components/Exercises/forms/ExerciseAliases.tsx
@@ -68,7 +68,7 @@ export function ExerciseAliases(props: { fieldName: string }) {
                         newVal.splice(index, 1);
                         helpers.setValue(newVal);
                     }}
-                    key={option.id ?? `${option.alias}-${index}`}
+                    key={option.id ?? option.alias}
                 />
             ));
 
@@ -98,4 +98,4 @@ export function ExerciseAliases(props: { fieldName: string }) {
             );
         }}
     />;
-}
+}
diff --git a/src/components/Exercises/forms/ExerciseNotes.tsx b/src/components/Exercises/forms/ExerciseNotes.tsx
@@ -3,15 +3,17 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { IconButton, InputAdornment, TextField } from "@mui/material";
 import Grid from '@mui/material/Grid';
 import { useField } from "formik";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export function ExerciseNotes(props: { fieldName: string }) {
     const [t] = useTranslation();
     const [field, meta, helpers] = useField(props.fieldName);
     const [newNoteValue, setNewNoteValue] = useState<string>('');
+    const noteKeys = useRef<string[]>(field.value.map(() => crypto.randomUUID()));
 
     const deleteAtIndex = (index: number) => {
+        noteKeys.current.splice(index, 1);
         helpers.setValue(field.value.filter((_: string, b: number) => b !== index));
     };
 
@@ -20,6 +22,7 @@ export function ExerciseNotes(props: { fieldName: string }) {
         helpers.setValue(field.value);
     };
     const addEntry = () => {
+        noteKeys.current.push(crypto.randomUUID());
         field.value.push(newNoteValue);
         helpers.setValue(field.value);
         setNewNoteValue('');
@@ -51,7 +54,7 @@ export function ExerciseNotes(props: { fieldName: string }) {
         </Grid>
         {field.value.map((note: string, index: number) =>
             <TextField
-                key={index}
+                key={noteKeys.current[index]}
                 fullWidth
                 value={note}
                 onChange={(event) => setNoteValueIndex(index, event.target.value)}
@@ -73,4 +76,4 @@ export function ExerciseNotes(props: { fieldName: string }) {
             />
         )}
     </>;
-}
+}
diff --git a/src/components/Exercises/screens/Detail/ExerciseDetailEdit.test.tsx b/src/components/Exercises/screens/Detail/ExerciseDetailEdit.test.tsx
@@ -106,7 +106,6 @@ describe("Exercise translation edit tests", () => {
             mutateAsync: vi.fn(),
         }));
 
-        // @ts-ignore
         // addTranslation.mockImplementation(() => Promise.resolve(
         //     new Translation(
         //         300,

diff --git a/src/components/Exercises/screens/Detail/ExerciseDetailView.tsx b/src/components/Exercises/screens/Detail/ExerciseDetailView.tsx
@@ -102,7 +102,7 @@ export const ExerciseDetailView = ({
                     </>}
 
                 <Typography variant="h5">{t("exercises.description")}</Typography>
-                <div dangerouslySetInnerHTML={{ __html: currentTranslation?.description! }} />
+                <div dangerouslySetInnerHTML={{ __html: currentTranslation?.description ?? "" }} />
                 <PaddingBox />
 
                 {currentTranslation?.notes.length > 0 && <Typography variant="h5">{t("exercises.notes")}</Typography>}

diff --git a/src/components/Exercises/screens/Detail/Head/index.tsx b/src/components/Exercises/screens/Detail/Head/index.tsx
@@ -28,7 +28,7 @@ export interface HeadProp {
     languages: Language[]
     changeLanguage: (lang: Language) => void,
     language: Language | undefined // language displayed in the head since it's not found in the translations
-    setEditMode: Function,
+    setEditMode: (editMode: boolean) => void,
     editMode: boolean
 }
 

diff --git a/src/components/Exercises/widgets/Overview/ExerciseGridLoadingSkeleton.tsx b/src/components/Exercises/widgets/Overview/ExerciseGridLoadingSkeleton.tsx
@@ -4,10 +4,12 @@ import React from "react";
 
 export const ExerciseGridSkeleton = () => {
 
+    const skeletonIds = Array.from({ length: 21 }, (_, id) => `exercise-skeleton-${id + 1}`);
+
     return (
         (<Grid container spacing={1}>
-            {[...Array(21)].map((skeletonBase, idx) => (
-                <Grid key={idx} sx={{ display: "flex" }} size={4}>
+            {skeletonIds.map((skeletonId) => (
+                <Grid key={skeletonId} sx={{ display: "flex" }} size={4}>
                     <Card>
                         <CardMedia>
                             <Skeleton variant="rectangular" width={250} height={150} />

diff --git a/src/components/Nutrition/screens/BmiCalculator.tsx b/src/components/Nutrition/screens/BmiCalculator.tsx
@@ -144,7 +144,7 @@ export const BmiCalculator = () => {
                         />
                         <CartesianGrid strokeDasharray="3 3" />
                         <Tooltip
-                            // @ts-ignore
+                            // @ts-expect-error -- Recharts exposes broader formatter value types than this chart accepts.
                             formatter={(value, name) => [Math.round(value as number), t('bmi.' + (name as string))]}
                         />
 
@@ -202,4 +202,4 @@ export const BmiCalculator = () => {
             </>}
         />
     );
-};
+};
diff --git a/src/components/Nutrition/widgets/DiaryOverview.tsx b/src/components/Nutrition/widgets/DiaryOverview.tsx
@@ -27,7 +27,7 @@ export const DiaryOverview = (props: {
                 </TableRow>
             </TableHead>
             <TableBody>
-                {Array.from(props.logged).map(([key]) =>
+                {Array.from(props.logged).map(([key, diaryEntries]) =>
                     <TableRow key={key}>
                         <TableCell>
                             <Link
@@ -37,15 +37,15 @@ export const DiaryOverview = (props: {
                         </TableCell>
                         <TableCell align="right">
                             {t('nutrition.valueEnergyKcal',
-                                { value: numberLocale(props.logged.get(key)?.nutritionalValues.energy!, i18n.language) }
+                                { value: numberLocale(diaryEntries.nutritionalValues.energy, i18n.language) }
                             )}
                         </TableCell>
                         <TableCell align="right">
-                            {numberLocale(props.logged.get(key)?.nutritionalValues.energy! - props.planned.energy, i18n.language)}
+                            {numberLocale(diaryEntries.nutritionalValues.energy - props.planned.energy, i18n.language)}
                         </TableCell>
                     </TableRow>)
                 }
             </TableBody>
         </Table>
     </TableContainer>;
-};
+};
diff --git a/src/components/Nutrition/widgets/charts/MacrosPieChart.tsx b/src/components/Nutrition/widgets/charts/MacrosPieChart.tsx
@@ -54,8 +54,8 @@ export const MacrosPieChart = (props: { data: NutritionalValues }) => {
             fill="#8884d8"
             dataKey="value"
         >
-            {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={colorGenerator.next().value!} />
+            {data.map((entry) => (
+                <Cell key={`cell-${entry.name}`} fill={colorGenerator.next().value!} />
             ))}
         </Pie>
         {/*<Tooltip />*/}

diff --git a/src/components/Nutrition/widgets/charts/NutritionalValuesDashboardChart.tsx b/src/components/Nutrition/widgets/charts/NutritionalValuesDashboardChart.tsx
@@ -20,10 +20,12 @@ export const NutritionalValuesDashboardChart = (props: {
     const [t, i18n] = useTranslation();
     const data = [
         {
+            id: 'logged',
             name: '',
             value: energyPercentage,
         },
         {
+            id: 'remaining',
             name: '',
             value: energyPercentage < 100 ? 100 - energyPercentage : 0,
         },
@@ -46,7 +48,7 @@ export const NutritionalValuesDashboardChart = (props: {
                 dataKey="value"
             >
                 {data.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                    <Cell key={`cell-${entry.id}`} fill={COLORS[index % COLORS.length]} />
                 ))}
             </Pie>
             <g>

diff --git a/src/components/Routines/models/WorkoutLog.ts b/src/components/Routines/models/WorkoutLog.ts
@@ -6,6 +6,7 @@ import { WeightUnit } from "@/components/Routines/models/WeightUnit";
 import { Adapter } from "@/core/lib/Adapter";
 
 export interface LogEntryForm {
+    clientKey: string;
     exercise: Exercise | null;
     repetitionsUnit: RepetitionUnit | null;
     weightUnit: WeightUnit | null;
@@ -156,4 +157,4 @@ export class WorkoutLogAdapter implements Adapter<WorkoutLog> {
         rest: item.restTime,
         rest_target: item.restTimeTarget
     });
-}
+}
diff --git a/src/components/Routines/screens/Detail/WorkoutStats.tsx b/src/components/Routines/screens/Detail/WorkoutStats.tsx
@@ -133,11 +133,11 @@ export const WorkoutStats = () => {
                         {statsData.data.map((row) => (
                             <TableRow key={row.key}>
                                 <TableCell>{row.key}</TableCell>
-                                {row.values.map((value, index) => (
+                                {statsData.headers.map((header, index) => (
                                     <TableCell
-                                        key={index}
+                                        key={header}
                                         sx={{ textAlign: 'right', }}
-                                    >{value?.toFixed(selectedValueType === StatType.Intensity ? 2 : 0) || ""}
+                                    >{row.values[index]?.toFixed(selectedValueType === StatType.Intensity ? 2 : 0) || ""}
                                     </TableCell>
                                 ))}
                             </TableRow>

diff --git a/src/components/Routines/widgets/RoutineDetailsCard.tsx b/src/components/Routines/widgets/RoutineDetailsCard.tsx
@@ -144,7 +144,7 @@ function SlotDataList(props: { slotData: SlotData }) {
                     return <SetConfigDataDetails
                         setConfigData={setConfig}
                         marginBottom="1em"
-                        key={index}
+                        key={`set-config-${setConfig.slotEntryId}-${setConfig.exerciseId}`}
                         showExercise={showExercise}
                     />;
                 })}
@@ -184,8 +184,8 @@ export const DayDetailsCard = (props: { dayData: RoutineDayData, routineId: numb
             />
             {props.dayData.slots.length > 0 && <CardContent sx={{ padding: 0, marginBottom: 0 }}>
                 <Stack>
-                    {props.dayData.slots.map((slotData, index) => (
-                        <div key={index}>
+                    {props.dayData.slots.map((slotData) => (
+                        <div key={`slot-${slotData.setConfigs.map(({ slotEntryId }) => slotEntryId).join("-")}`}>
                             <Box sx={{ padding: 1 }}>
                                 <SlotDataList slotData={slotData} />
                             </Box>

diff --git a/src/components/Routines/widgets/forms/BaseConfigForm.tsx b/src/components/Routines/widgets/forms/BaseConfigForm.tsx
@@ -275,8 +275,8 @@ export const ConfigDetailsRequirementsField = (props: {
             open={Boolean(anchorEl)}
             onClose={() => setAnchorEl(null)}
         >
-            {...REQUIREMENTS_VALUES.map((e, index) => <MenuItem
-                key={index}
+            {...REQUIREMENTS_VALUES.map((e) => <MenuItem
+                key={e}
                 onClick={() => handleSelection(e as unknown as RequirementsType)}>
                 <ListItemIcon>
                     {selectedElements.includes(e as unknown as RequirementsType)
@@ -504,4 +504,4 @@ export const EntryDetailsStepField = (props: {
     </>);
 };
 
-*/
+*/
diff --git a/src/components/Routines/widgets/forms/ProgressionForm.tsx b/src/components/Routines/widgets/forms/ProgressionForm.tsx
@@ -349,7 +349,7 @@ export const ProgressionForm = (props: {
                                 {({ insert, remove }) => (<>
 
                                         {formik.values.entries.map((log, index) => (
-                                            <React.Fragment key={index}>
+                                            <React.Fragment key={`progression-${log.iteration}`}>
                                                 <Grid size={2} sx={{
                                                     display: 'flex',
                                                     justifyContent: 'space-around',
@@ -453,8 +453,8 @@ export const ProgressionForm = (props: {
                                                                     values={log.requirements}
                                                                     fieldName={`entries.${index}.requirements`} />}
                                                             {log.requirements.length >= 0 && <br />}
-                                                            {log.requirements.length >= 0 && log.requirements.map((requirement, index) => (
-                                                                <Typography key={index} variant={'caption'}>
+                                                            {log.requirements.length >= 0 && log.requirements.map((requirement) => (
+                                                                <Typography key={JSON.stringify(requirement)} variant={'caption'}>
                                                                     {requirement} &nbsp;
                                                                 </Typography>
                                                             ))}

diff --git a/src/components/Routines/widgets/forms/SessionLogsForm.tsx b/src/components/Routines/widgets/forms/SessionLogsForm.tsx
@@ -139,6 +139,7 @@ export const SessionLogsForm = ({ dayId, routineId, selectedDate }: SessionLogsF
                 for (let i = 0; i < config.nrOfSets; i++) {
 
                     initialValues.logs.push({
+                        clientKey: `${dayData.iteration}-${config.slotEntryId}-${config.exerciseId}-${i}`,
                         exercise: config.exercise!,
                         repetitionsUnit: config.repetitionsUnit!,
                         weightUnit: config.weightUnit!,
@@ -174,7 +175,7 @@ export const SessionLogsForm = ({ dayId, routineId, selectedDate }: SessionLogsF
                         {({ insert, remove }) => (<>
 
                                 {formik.values.logs.map((log, index) => (
-                                    <Grid container key={index} spacing={1} sx={{ mt: 2 }}>
+                                    <Grid container key={log.clientKey} spacing={1} sx={{ mt: 2 }}>
 
                                         {/* Only show the exercise name the first time it appears */}
                                         {(index === 0 || (index > 0 && formik.values.logs[index - 1].exercise!.id !== formik.values.logs[index].exercise!.id)) && <>

diff --git a/src/core/ui/Widgets/FormError.tsx b/src/core/ui/Widgets/FormError.tsx
@@ -16,8 +16,8 @@ export const FormQueryErrors = (props: { mutationQuery: any }) => {
             <Alert severity="error" sx={{ mb: 1 }}>
                 <AlertTitle>{props.mutationQuery.error?.message}</AlertTitle>
                 <ul>
-                    {collectValidationErrors(props.mutationQuery.error.response?.data).map((error, index) =>
-                        <li key={index}>{error}</li>
+                    {[...new Set(collectValidationErrors(props.mutationQuery.error.response?.data))].map((error) =>
+                        <li key={error}>{error}</li>
                     )}
                 </ul>
             </Alert>
@@ -36,11 +36,11 @@ export const FormQueryErrorsSnackbar = (props: { mutationQuery: any }) => {
             <Alert severity="error" sx={{ width: '100%' }}>
                 <AlertTitle>{props.mutationQuery.error?.message}</AlertTitle>
                 <ul>
-                    {collectValidationErrors(props.mutationQuery.error.response?.data).map((error, index) =>
-                        <li key={index}>{error}</li>
+                    {[...new Set(collectValidationErrors(props.mutationQuery.error.response?.data))].map((error) =>
+                        <li key={error}>{error}</li>
                     )}
                 </ul>
             </Alert>
         </Snackbar>
     );
-};
+};