How to dynamically display moment date in React

Question

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>
)
  }
});

Answer 1

You need to use the state to keep the current week end and start. Components re-render whenever props or state change. You need to keep this data in the state (if using redux you will get the data from the props).

Here's an example using ES6 (Make sure to include babel with stage-0 in your webpack config):

class WeekNav extends PureComponent {

  componentWillMount() {
    this.setState({
      currentWeekStart: moment().startOf('week').format("MM/DD/YYYY"),
      currentWeekEnd: moment().endOf('week').format("MM/DD/YYYY"),
    });
  }

  prevWeek = () => {
    const { currentWeekStart, currentWeekEnd } = this.state;

    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");

    this.setState({
      currentWeekStart: newWeekStart,
      currentWeekEnd: newWeekEnd,
    });
  }

  upcomingWeek = () => {
    const { currentWeekStart, currentWeekEnd } = this.state;

    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");

    this.setState({
      currentWeekStart: newWeekStart,
      currentWeekEnd: newWeekEnd,
    });
  }

 render: function() {
    const { currentWeekStart, currentWeekEnd } = this.state;

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

PS: It'd be quite easy to update my previous code to ES5 using React.createClass .