Dynamic data in bar chart not rendering React js-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

React does not rerender unless the data in a useState hook has changed or props have changed.

You have set the students' firstNames to studentsArray which is a local variable to the function. Changing that will not trigger rerender.

Change the data fetching useEffect as below where it set the student Names to component state.

function ClassGrades() {
    const currentClassClicked = localStorage.getItem("currentClassClicked");
    const [studentNames, setStudentNames] = useState([]);

    useEffect(() => {
        Axios.get("http://localhost:1337/api/getStudentsFromClass", {
            params: { currentClassClicked }
        }).then(response => {
            setStudentNames(
                (response?.data?.message ?? []).map(
                    ({ firstName }) => firstName
                )
            );
        });
    }, []);

    return (
        <div className="class-grades-container">
            <h1>{currentClassClicked}</h1>
            <Bar
                data={{
                    labels: studentNames,
                    datasets: [
                        {
                            label: "student grades",
                            data: [30, 80, 20, 10]
                        }
                    ]
                }}
            />
        </div>
    );
}

export default ClassGrades;