I need proper solution as the code that I have written is seems to be hard coded as multiple filter method is use for same scenario. Please help me to sort out as I am new to react. The output is dynamically rendered in bar chart.
const ClientActivityChart = () => {
const [clients, setClients] = useState([])
const getClients = async () => {
try {
const res = await fetch('http://localhost:4000/api/addClients', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
})
const data = await res.json()
console.log(data)
const filterJan = data.filter((item) => {
let date = new Date(item.date)
const month = date.toLocaleString('default', { month: 'long' })
return month === 'January'
})
const filterFeb = data.filter((item) => {
let date = new Date(item.date)
const month = date.toLocaleString('default', { month: 'long' })
return month === 'February'
})
const filterMarch = data.filter((item) => {
let date = new Date(item.date)
const month = date.toLocaleString('default', { month: 'long' })
return month === 'March'
})
const filterApril = data.filter((item) => {
let date = new Date(item.date)
const month = date.toLocaleString('default', { month: 'long' })
return month === 'April'
})
const filterJune = .........
var dataItem = [
filterJan.length,
filterFeb.length,
filterMarch.length,
filterApril.length,
filterMay.length,
filterJune.length,
filterJuly.length,
filterAug.length,
filterSep.length,
filterOct.length,
filterNov.length,
filterDec.length,
]
console.log(dataItem)
setClients(dataItem)
} catch (err) {
console.log(err)
}
}
useEffect(() => {
getClients()
}, [])
Here’s a output.
enter image description here
