React DayPicker Infinite loop or no value

Question

The app matches an array of birthdays with the current day. I want to extend it with a date picker, so that it would not only display the birthdays of the day but the birthdays for any date picked.

The results for the console.log are the values I expect, although they appear twice but this is the closed I get. I can't find a way to make them render without an infinite loop or unknown values.

This is my current code:

import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import data from './writers-birthday-array.json';

function PickDate() {

  const [selected, setSelected] = useState();
  const [matchDate, setMatchDate] = useState(data);
  const [listWriter, setListWriter] = useState([]);

  if (selected) {
    let formattedDate =
      ('0' + selected.getDate()).slice(-2) + `/` + (selected.getMonth() + 1);

    const listedWriter = matchDate.filter(
      (writer) => writer.birthday === formattedDate
    );


    //setListWriter(listedWriter); -> this will cause an infinite loop



    console.log(formattedDate); //correct value
    console.log(listedWriter); // this is the value I want to display on the page
  }

  return (
    <main>
      <section className="container">
        <div>
          <h3>Pick a date</h3>
          <DayPicker
            mode="single"
            selected={selected}
            onSelect={setSelected}    
          />
        </div>
     
        {listWriter ? <div> {listWriter} </div> : <div></div>}
        //here listWriter has no value     
     </section>
    </main>
  );
}

export default PickDate;

Here is the package I used for the day picker: https://www.npmjs.com/package/react-day-picker

The app is deployed on Netlify, the first module to display the writers works fine: https://writers-birthday.netlify.app/

score 0 · Answer 1 · edited Nov 16 '22 at 14:45

I found the issue, it had nothing to do with DayPicker but with the way I declared my variables. Here is the new code, working just fine :)

import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import data from './writers-birthday-array.json';
import List from './List';

function PickDate() {
  //selected: the value given by DayPicker when a date is selected
  const [selected, setSelected] = useState();
  const [matchDate, setMatchDate] = useState(data);
  let formattedDate = 0;
  let listedWriter = '';

  if (selected) {
    formattedDate =
      ('0' + selected.getDate()).slice(-2) + `/` + (selected.getMonth() + 1);
  }
  //console.log(formattedDate);

  if (formattedDate != 0) {
    listedWriter = matchDate.filter(
      (writer) => writer.birthday === formattedDate
    );
  }

  //console.log(listedWriter);

  return (
    <main>
      <section className="container">
        <div>
          <h3>Pick a date</h3>
          <DayPicker
            mode="single"
            selected={selected}
            // onChange={(date) => setSelected(date)}
            onSelect={setSelected}
            //footer={footer}
          />
        </div>

        {selected ? (
          <List people={listedWriter} />
        ) : (
          <div>Please pick a date</div>
        )}
      </section>
    </main>
  );
}

export default PickDate;

React DayPicker Infinite loop or no value

1 Answers1