How to show filtered data in Javascript callback function react-calendar-month-view?

Question

I'm using this https://github.com/alwyntan/react-calendar-month-view calendar to render my admin data.

Here is the live demo: https://alwyntan.github.io/react-calendar-month-view/, and this is the live demo codebase (https://github.com/alwyntan/react-calendar-month-view/blob/master/examples/src/index.js).

So I have this array

const result = [{
        date: "5/7/2021",
        totalSubmit: 8
    },
    {
        date: "5/6/2021",
        totalSubmit: 17
    },
    {
        date: "5/3/2021",
        totalSubmit: 11
    }
]

The component accepts a renderDay callback function, basically if the callback function returns

const renderDayF = (day) => {
    const dayDate = new Date(day).toLocaleDateString()
    if (dayDate === '5/7/2021') {
        return (<p>
            Halo
        </p>)
    }
};

The function above will create a calendar that shows 'Halo' in 7 May 2021, and nothing in 1-6 May, and 8-31 May.

My goal is for result array (in the top), to compare the date and the callback function, so in the 5/7/2021, it returns the results totalSubmit (which is 8), in 5/6/2021, it returns the results totalSubmit (which is 17), and so on. Can anyone please help me? I'm a bit stuck here, I've tried using maps and filter, but maybe I did something wrong.

Answer 1

As you will probably be using the results from this question I suggest you use a simpler, more helpful data format:

const submitcounts = updatedSales.reduce((a,{date}) => {
      a[date] = (a[date] || 0) + 1;
      return a;  
    }, {});
/*      = {"5/7/2021": 8,
           "5/6/2021":17,
           "5/3/2021":11}
*/
        
const renderDayF= (day) => {
    const dayDate = new Date(day).toLocaleDateString("en-US")
    console.log(submitcounts[dayDate]||"");
    // return (<p>...</p>)
};

With that everything falls into place quite easily. Unfortunately I don't know how to do this the React way, but I hope my console.log() is an indication of where to go.