title: How to dynamically change the date for the date key in the items prop for react-native-calendars
body: <p>I am trying to change the date in the items prop for react native calendars.
  From the docs, it shows that it requires a date string as a key which then requires an array of objects to display for that particular date.</p>
  
  <p>Something like this.</p>
  
  <pre><code>&lt;Agenda
      items: {{
          '2019-10-12': [],
          '2019-10-13': [{}, {}],
          '2019-10-14': [{}],
          '2019-10-15': []
      }}
  /&gt;
  </code></pre>
  
  <p>However, I do not want to hardcode the dates. What I would like is to display the dates of the next week. This is the approach I have tried</p>
  
  <p>I get the date using </p>
  
  <pre><code> new currentDate = new Date();
  </code></pre>
  
  <p>I pass this date into weekly items to get my weekly items object.
  The below function uses two other functions called <code>addDays</code> and <code>dateToString</code> to properly render the dates.</p>
  
  <pre><code>const weeklyItems = (date) =&gt; {
      const day1 = dateToString(addDays(date, 1));
      const day2 = dateToString(addDays(date, 2));
      const day3 = dateToString(addDays(date, 3));
      const day4 = dateToString(addDays(date, 4));
      const day5 = dateToString(addDays(date, 5));
      const day6 = dateToString(addDays(date, 6));
      const currentDate = dateToString(date);
      return {
          currentDate : [],
          day1: [],
          day2: [],
          day3: [],
          day4: [],
          day5: [],
          day6: []
      }
  }
  </code></pre>
  
  <p><code>addDays</code> and <code>dateToString</code> are my helper functions:</p>
  
  <pre><code>function addDays(date, days) {
      var result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
  }
  </code></pre>
  
  <p>This function converts a date object into the form 'YYYY-MM-DD' which is what is required by <code>Agenda</code></p>
  
  <pre><code>function dateToString (date) {
      const newString  = moment(date).format('YYYY-MM-DD');
      return newString.toString()
  }
  </code></pre>
  
  <p>I have checked to see if my dates were correct and they all check out. I also have used <code>currentDate</code> and <code>day6</code> as my objects for the <code>minDate</code> and <code>maxDate</code> props for <code>Agenda</code> and they work as expected.</p>
  
  <p>After doing this my <code>Agenda</code> now looks like this:</p>
  
  <pre><code> &lt;Agenda
      minDate = {currentDate}
      maxDate = {day6}
      selected = {currentDate}
      items: {weeklyItems(currentDate)}
      renderEmptyDate={() =&gt; {return (&lt;View/&gt;);}}
  /&gt;
  </code></pre>
  
  <p>And this makes it stop working. I know that I have empty arrays in my weeklyItems but for now I am just trying to get the dates working and unfortunately they are not. Any help would be appreciated.</p>