title: How to dynamically display moment date in React
body: <p>I am new to React. I am trying to create a week by week scroller for an eventual calendar that changes the week as you hit forward or back arrow buttons. The dates change as I hope in console logs, but I can't figure out how to get the date that is displaying to change as the user hits the buttons. I am confused by whether to use state, props, etc. Any help would be appreciated.</p>
  
  <pre><code>var week_nav = React.createClass({
  
  
   render: function() {
      var currentWeekStart = moment().startOf('week').format("MM/DD/YYYY");
      var currentWeekEnd = moment().endOf('week').format("MM/DD/YYYY");
  
  var prevWeek = function() {
    newStart = currentWeekStart.slice();
    newEnd = currentWeekEnd.slice();
    newWeekStart = moment(newStart).subtract(7, 'days').format("MM/DD/YYYY");
    newWeekEnd = moment(newEnd).subtract(7, 'days').format("MM/DD/YYYY");
    currentWeekStart = newWeekStart;
    currentWeekEnd = newWeekEnd;
  }
  
  var upcomingWeek = function() {
    newStart = currentWeekStart.slice();
    newEnd = currentWeekEnd.slice();
    newWeekStart = moment(newStart).add(7, 'days').format("MM/DD/YYYY");
    newWeekEnd = moment(newEnd).add(7, 'days').format("MM/DD/YYYY");
    currentWeekStart = newWeekStart;
    currentWeekEnd = newWeekEnd;
  }
  
  return (
    &lt;div className="row"&gt;
      &lt;div className="col s2"&gt;
        &lt;a className="waves-effect waves-light btn" id="prevWeek" onClick={prevWeek}&gt;&lt;i className="material-icons"&gt;arrow_back&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div className="col s4"&gt;
        &lt;p&gt;{currentWeekStart} - {currentWeekEnd}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div className="col s2"&gt;
        &lt;a className="waves-effect waves-light btn" id="upcomingWeek" onClick={upcomingWeek}&gt;&lt;i className="material-icons"&gt;arrow_forward&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
    }
  });
  </code></pre>