How to dynamically display moment date in React

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.

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 (
  <div className="row">
    <div className="col s2">
      <a className="waves-effect waves-light btn" id="prevWeek" onClick={prevWeek}><i className="material-icons">arrow_back</i></a>
    </div>
    <div className="col s4">
      <p>{currentWeekStart} - {currentWeekEnd}</p>
    </div>
    <div className="col s2">
      <a className="waves-effect waves-light btn" id="upcomingWeek" onClick={upcomingWeek}><i className="material-icons">arrow_forward</i></a>
    </div>
  </div>
)
  }
});