Chartjs-How to fix map is not function even there is already set data in the useState using React Hook

by

0👍

It looks like you’re initializing that state to an empty object:

const [receiveGroupCount, setReceiveGroupCount] = useState({});

Objects don’t have a .map property. Try initializing to an empty array instead.

0👍

receiveGroupCount is not null initially, it is {}(an empty object) because of this statement:
const [receiveGroupCount, setReceiveGroupCount] = useState({ });

.map() is a method for arrays, and although you might have an array like data later in receiveGroupCount, the first time your randomVal() is run, it will fail.

You are already trying to mitigate the issue by checking for null but if you do not want to change your initial state you can change your if check like this:

if(receiveGroupCount != {}) {
        for (var day = from; day <= to; day.setDate(day.getDate() + 1)) {
            receiveGroupCount.map((rows) => {
                randomArr.push(rows.amount)
            })
        }  
        return randomArr
    }

Note: Your useEffect will run the first time and after every render where any of the selectionRange,receiveGroupCount,receiveCheckCount changes.

0👍

You just simply have to create a state with the default variable
try:

const [receiveGroupCount, setReceiveGroupCount] = useState({
        labels: // your code here,
        datasets: []
    });

Leave a comment