Array inside useEffect to use in if Statement

Question

I'm trying to use an if statement in my code where I want it to 'open' a Calendar Box if the date of today has occurred as well as for the past days of my calendar to open.

Here is my code where I'm using an useEffect to post it on loading the React Component:

  // Call on post method via axios
  useEffect(async () => {
    console.log(daysData);

    const daysDay = daysData.map((day) => day.day);

    console.log(daysDay);

    if (date + 1 >= daysDay) {
      // Url where to post
      await axios.post(`http://localhost:5001/open/chocolate`, {
        day: date,
      });

      alert('New day is available to eat!');
    }

    setOpenCalendarBox('');
  }, []);

I'm trying to get an array I've initiated a few lines above of the useEffect function (daysData) and I want the value of the 'day' item inside of the objects inside of the array and then compare the date of today if it is equal to or less than daysDay (day item inside of daysData)

Here is the code for my array:

// Here I initalize the array with useState
  const [daysData, setDaysData] = useState([]);

  // Here is the port I'm fetching my array from.
  useEffect(() => {
    fetch('http://localhost:5001/chocolates')
      .then((resp) => resp.json())
      .then((data) => setDaysData(data));
  }, []);

And here is the date code:

  // Initiate new Date
  const current = new Date();
  // Retrieve current day of the month
  const date = current.getDate();

I can't seem to get the effect I want. I basically only want to see if the day has passed or if it is today then I want it to post to '/open/chocolate'.

Terry · Accepted Answer · 2021-12-26 10:45:55Z

1

That's probably because the value of daysData is set asynchronously, yet the useEffect block that depends on it does not list it as a dependency. Therefore you are invoking logic, which requires daysData to be populated asynchronously, when the component is loaded at runtime. So daysData will be empty.

A solution is to simply add daysData in the dependency array, so that you will only execute whatever logic that is in there once the array is successfully populated.

On the other hand, you are comparing a number against an array: which will give an unexpected result. If you want any of the day to meet date + 1, use daysDay.some(d => date + 1 >= d). If you want all of the days to meet date + 1, use daysDate.every(d => date + 1 >= d).

useEffect(async () => {
  const daysDay = daysData.map((day) => day.day);

  // This needs to be fixed, see comment for options
  if (daysDay.some(d => date + 1 > d)) {
    // Url where to post
    await axios.post(`http://localhost:5001/open/chocolate`, {
      day: date,
    });
  }

  setOpenCalendarBox('');
}, [daysData]);

edited Dec 26, 2021 at 10:45

answered Dec 26, 2021 at 10:32

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ramesh Reddy Over a year ago

Adding to this, daysDay is an array, but it is compared with date + 1.

Terry Over a year ago

@RameshReddy Thanks! That's also something that needs to be fixed... I have added options for OP in my answer.

Mustafa Said Helal Over a year ago

Thanks for the help guys Terry and @RameshReddy , the answer helped me a bit since I know understand that I had to add daysData in the dependency array but it didn't give me the desired effect, when I now console log the daysData constant it does show me the values of the days but it still doesn't work to compare them to the current date, I want the useEffect to post every number exact or below the one but I can't seem to get it to work, anyway thanks guys for help ^^

Collectives™ on Stack Overflow

Array inside useEffect to use in if Statement

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related