Params Return Undefined after componentWillReceiveProps called

Question

I have a React component, that when a button is clicked, takes the user to a new URL for a different day using the <Link /> component and it should render the events/games for that day (same component but should fetch new data). The URL updates, but the this.params.day - for instance - returns undefined, however when using React Dev tools, it's there and I can see it, and it has updated for the next day... I am relying on React Router's params to grab the correct data, I'm a little stuck on why I can't get it to re-render the components correctly. Here are the important parts of the component:

class Games extends Component {

  constructor(props){
    super(props);

    this.state = {
      loading: true,
      games: [],
      month: '',
      day: '',
      year: '',
      nextDay: '',
      prevDay: ''
    };

    // this.prevDay = this.prevDay.bind(this);
    // this.nextDay = this.nextDay.bind(this);
  }


  // set the state of the app based on the date
  parseDate(){
    // if we have params in the url
    if( this.props.params.month && this.props.params.day && this.props.params.year ){
      this.setState({
        month: moment(this.props.params.month, 'MM').format('MM'),
        day: moment(this.props.params.day, 'DD').format('DD'),
        year: moment(this.props.params.year, 'YYYY').format('YYYY'),
      });
    } else{
      // no params? set the date to today
      this.setState({
        month: moment().format('MM'),
        day: moment().format('DD'),
        year: moment().format('YYYY'),
      });
    }
    console.log('Date parsed.');
  }

  testProps(props){
    console.log('FIRED & Params: ' + this.props.params.day);
  }

  // generate previous day
  prevDay(){
    let currentDate = this.state.month+this.state.day+this.state.year,
        prevDate = moment(currentDate, 'MMDDYYYY').subtract(1, 'days').format('MM/DD/YYYY');
    this.setState({
      prevDay: prevDate
    });
  }

  // Generate next day
  nextDay(){
    let currentDate = this.state.month+this.state.day+this.state.year,
        nextDate = moment(currentDate, 'MMDDYYYY').add(1, 'days').format('MM/DD/YYYY');
    this.setState({
      nextDay: nextDate
    });
  }

  // Grab games for current day
  getGames(){

    this.setState({loading: true});

    // error handling
    function handleErrors(response) {
      if (!response.ok) {
        throw Error(response.statusText + 'POOP!');
      }
      return response;
    }

    fetch(`http://mlb.mlb.com/gdcross/components/game/mlb/year_${this.state.year}/month_${this.state.month}/day_${this.state.day}/master_scoreboard.json`)
    //fetch(`http://localhost:3000/inprogress.json`)
    .then(handleErrors)
    .then(response => response.json())
    .then(games => {
      const gamesLoaded = games.data;

      this.setState({
        games: gamesLoaded,
        loading: false
      });
    })
    .catch(error => this.setState({games: 'Error Finding Games'}) );
    console.log('Games fetched.');
  }

  componentWillMount(){
    this.parseDate();
    console.log('Component Will Mount Fired');
  }

  componentDidMount(){
    this.getGames();
    this.prevDay();
    this.nextDay();
    console.log('Component Mounted');
  }

  componentWillReceiveProps(){
    this.parseDate();
    // this.testProps();
    console.log(this.props.params.day);

    console.log('Component received props!');
  }

The most important part of this is the parseDate() function , as it should set the state of the component based on dates, but when called in componentWillReceiveProps the params are undefined, but yet they are visible in React Dev Tools.

Any thoughts and help would be appreciated. Thanks!

Answer 1

componentWillRecieveProps takes an argument of the new props. You want something like

componentWillReceiveProps(newProps) {
  this.parseDate(newProps)
}

And have parseDate use the argument instead of this.props.