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

Question

Right now I am creating a chart and the chart data is based on the backend api created. Now I have problem where I need to push all the amounts in the array. So by doing this I need of course map the state and push it on the array however there is error happen it says that
TypeError: receiveGroupCount.map is not a function. I don't know why this happen.
Error:
Response:
State:
const [receiveCheckCount, setReceiveCheckCount] = useState();
const [receiveGroupCount, setReceiveGroupCount] = useState({
});
API:
let list_filter_countings_url = process.env.BASEURL+"chart_filter_range/"+moment(selectionRange.startDate).format("YYYY-MM-DD")+"/"+moment(selectionRange.endDate).format("YYYY-MM-DD");
axios.get(list_filter_countings_url, { headers: { 'Authorization': AuthToken, 'Accept': 'application/json', 'Content-Type': 'application/json' } })
.then(res => {
console.log(res);
if(res) {
const count_receive_check = res.data.data.receive;
const count_receive_grouped = res.data.data.data_receive_grouped;
setReceiveCheckCount(count_receive_check);
setReceiveGroupCount(count_receive_grouped);
}
})
.catch((error) => {
});
Chart Parameters:
useEffect(() => {
setChartData({
labels: dataDate(selectionRange),
datasets: [
{
label: 'Receive Check',
backgroundColor: 'rgb(195 218 251 / 35%)',
borderColor: '#70a8f3',
pointBackgroundColor: "#fff",
pointBorderWidth: '2',
fill: true,
lineTension: 0.0,
pointRadius: 7,
borderWidth: 1,
data: randomVal(),
//data:[12, 19, 3, 5, 2, 3]
}
]
})
},[selectionRange,receiveGroupCount,receiveCheckCount])
const randomVal = () => {
var randomArr = []
var from = new Date(selectionRange.startDate);
var to = new Date(selectionRange.endDate);
console.log(receiveGroupCount)
if(receiveGroupCount != null) {
for (var day = from; day <= to; day.setDate(day.getDate() + 1)) {
receiveGroupCount.map((rows) => {
randomArr.push(rows.amount)
})
}
return randomArr
}
}

Answer 1

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.

Answer 2

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.

Answer 3

You just simply have to create a state with the default variable
try:
const [receiveGroupCount, setReceiveGroupCount] = useState({
labels: // your code here,
datasets: []
});