use effect to reset selected item on date change

src/components/caloriesList/CaloriesDateInput.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useContext } from 'react';
+import React, { ChangeEvent, useContext, useEffect } from 'react';
 import { AppContext } from '../../layout/AppContext';
 import { getDateString } from '../../utils/date';
 import styles from './caloriesDateInput.css';
@@ -6,10 +6,13 @@ import styles from './caloriesDateInput.css';
 function CaloriesDateInput () {
   const {selectedDate, setSelectedDate, setSelectedItem} = useContext(AppContext);
 
+  useEffect(() => {
+    setSelectedItem();
+  }, [selectedDate]);
+
   function onDateChange (event: ChangeEvent<HTMLInputElement>) {
     const newDate = (new Date(event.target.value)).getTime();
     setSelectedDate(newDate);
-    setSelectedItem();
   }
 
   const date = new Date(selectedDate);

src/components/caloriesList/CaloriesList.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import ReactSwipe from 'react-swipe';
 import { AppContext } from '../../layout/AppContext';
 import { haveSameDay } from '../../utils/date';