set key to input to ensure rerendering defaultValue

src/components/caloriesInput/CaloriesInput.tsx

@@ -3,8 +3,8 @@ import { IconButton } from '../button/IconButton';
 import styles from './caloriesInput.css';
 
 type CaloriesInputProps = {
-  addCalories: (calories: { title: string, count: number}) => void,
-  saveCalories: (calories: { title: string, count: number}) => void,
+  addCalories: (calories: { title: string, count: number }) => void,
+  saveCalories: (calories: { title: string, count: number }) => void,
   item?: CalorieValue
 };
 
@@ -13,7 +13,7 @@ interface ICalorieInputForm extends HTMLFormElement {
   caloriesCount: HTMLInputElement;
 }
 
-function CaloriesInput ({ addCalories, saveCalories, item }: CaloriesInputProps) {
+function CaloriesInput ({addCalories, saveCalories, item}: CaloriesInputProps) {
   function onSubmit (event: FormEvent<ICalorieInputForm>) {
     event.preventDefault();
 
@@ -22,14 +22,14 @@ function CaloriesInput ({ addCalories, saveCalories, item }: CaloriesInputProps)
     const count = Number(form.caloriesCount.value) || 0;
 
     if (!item) {
-      addCalories({ title, count });
+      addCalories({title, count});
 
       form.querySelectorAll('input').forEach((formElement) => {
         formElement.value = '';
         formElement.blur();
       });
     } else {
-      saveCalories({ title, count});
+      saveCalories({title, count});
     }
   }
 
@@ -47,12 +47,14 @@ function CaloriesInput ({ addCalories, saveCalories, item }: CaloriesInputProps)
       <div className={styles.inputWrapper}>
         <div className={styles.formRow}>
           <label htmlFor="caloriesTitle">Nahrungsmittel:</label>
-          <input id="caloriesTitle" name="caloriesTitle" type="text" defaultValue={itemTitle} required />
+          <input key={itemTitle} id="caloriesTitle" name="caloriesTitle" type="text" defaultValue={itemTitle}
+                 required />
         </div>
 
         <div className={styles.formRow}>
           <label htmlFor="caloriesCount">Kalorien:</label>
-          <input id="caloriesCount" name="caloriesCount" type="number" defaultValue={itemCount} required />
+          <input key={itemCount} id="caloriesCount" name="caloriesCount" type="number" defaultValue={itemCount}
+                 required />
         </div>
       </div>