Chartjs-Dynamic data in bar chart not rendering React js

by

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>
    )

Leave a comment