score:0
Accepted answer
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: stackoverflow.com
Related Query
- Dynamic data in bar chart not rendering React js
- React chart.js dynamic data update not rendering
- Why my react datatable is rendering all data at once also search bar is not working?
- React Native "onViewableItemsChanged" not working while scrolling on dynamic data
- How to fetch data in react server side rendering based on dynamic routing path
- Pie Chart not rendering React Chart.js
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- C3 chart not rendering in react project
- React router dynamic routes not rendering component
- D3 Bar Chart + React Hooks - exit().remove() not working
- JSReport - chart not rendering with dynamic values
- React App Table Help - Data is not rendering on page correctly
- Fetched data from ajax in component is not rendering in React
- Api data not rendering - react
- Dynamic <table> not rendering data
- React not Rendering correctly after update of Data
- React vis Line Chart not rendering properly
- React not rendering data from useEffect
- React Native FlatList not rendering when data updates (Redux)
- React functional component is not rendering when updating the Sate after pushing data to array
- Why is this bar chart using chart.js not rendering in react.js?
- Rendering a Chart in React with Asynchronous Object Data
- React bootstrap modal not rendering updated data
- Mapping JSON data to Chart.js Bar chart in React
- Victory: Animating Circular Progress Bar - not rendering chart
- React Component not Rendering New Data from Redux Store
- Dynamic Rendering Of React Components Based On External Data
- React not getting data before rendering
- React - 'react-d3-graph' not rendering Chart component
- React and react-chartjs-2, Line chart not displaying data from API
More Query from same tag
- How to save current user data using react-redux?
- Uncaught Error: "reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers
- import React Components to HTML
- Google Maps element is just grey in react app
- 'Cannot find module' when using webpack loaders
- React-select is not send in the request payload
- Clear input text after click event
- React function in a component
- Using GraphQL values with React When They Might Be null
- Update Events in React : order?
- Gatsby: why does a.png work, but b.png returns Error: emitFile is required from module system?
- react setState doesn't work with stream data?
- How do I delay an animation in gsap for react
- .NET Core 3.1 with ReactJs 16.9.0 - Run in IIS sub-folder
- Nested API calls in React.js
- i have a problem with react ,, i want to have 2 navbar styles in app
- Problem rendering the contents of array using map on reactjs
- Why isn't oncopy working with React but working with normal JavaScript code?
- cannot be used as a JSX component Its return type string | Element is not a valid JSX element Type 'string' is not assignable to type 'Element | null'
- Trying to return a promise from an action creator dispatched from mapDispatchToProps
- React-Router how to link the links to the actual page
- How to match id key from two JSON files then update the source JSON with changes
- How to make a React Function infer a typescript type?
- how write a type definition for a HoC using flow
- input[range] progress workaround in chrome not working when selecting value
- Unable to import outlined svg icon component material-ui
- react antd input defaultValue is not displayed
- React table - dynamic group header
- react - upload image and attach upload path URL to database entry
- React/Redux - Dispatch not updating view