0👍
✅
React renders when state and props of the component change. studentsArray
is an array that is not a state nor a prop. So react doesn’t know about the changes you have made. Follow these steps to get reflection of the data
Create state for student list
You need to store student list in state of the component
const [list, setList] = useState([])
Set state in fetching logic
useEffect(() => {
const studentsArray = [];
Axios.get("http://localhost:1337/api/getStudentsFromClass", {
params: {currentClassClicked}
}).then((response) => {
setStudents(response.data.message)
// console.log(response.data.message)
for (let i = 0; i<response.data.message.length; i++){
studentsArray.push(String(response.data.message[i].firstName))
}
setList(studentsArray)
})
}, [])
Use list in chart
Use state list in DOM
return (
<div className='class-grades-container'>
<h1>{currentClassClicked}</h1>
<Bar
data={{
labels: list,
datasets: [
{
label: "student grades",
data: [30, 80, 20, 10]
}
]
}}
/>
</div>
)
Source:stackexchange.com