Dynamic data in bar chart not rendering React js

I’m trying to fetch data from a database and render it as the x-axis labels in a bar chart.

import React, { useState, useEffect } from "react";
import "../styling/ClassGrades.css";
import { Bar } from "react-chartjs-2";
import Axios from "axios";

function ClassGrades() {
    let studentsArray = [];

    useEffect(() => {
        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));
            }
            console.log(studentsArray);

            // console.log(response.data.message[0].firstName)
        });
    }, []);

    console.log(studentsArray);

    const currentClassClicked = localStorage.getItem("currentClassClicked");
    console.log(currentClassClicked);
    const [students, setStudents] = useState([]);
    return (
        <div className="class-grades-container">
            <h1>{currentClassClicked}</h1>
            <Bar
                data={{
                    labels: studentsArray,
                    datasets: [
                        {
                            label: "student grades",
                            data: [30, 80, 20, 10]
                        }
                    ]
                }}
            />
        </div>
    );
}

export default ClassGrades;

I created an array and in the useEffect hook, each of the data is added to the studentsArray but it doesn’t render in the bar chart. I console logged the array, and the data is all there.

>Solution :

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