score:1
Accepted answer
i think you are missing a lot about react fundamentals and you should go read the docs which have plenty of examples and patterns. what you want to do is make sure your component can handle a "loading" state. async requests are not immediate and take time, what is your component going to look like while you wait for the request to complete ?
i am using a state variable to track the completion of the request. i would recommend looking up how useeffect works as well to better understand this snippet.
import avgvisitduration from './component/avgvisitduration';
import devices from './component/devices';
import about from './component/about';
import { useeffect, usestate } from 'react';
function app() {
const [devices, setdevices] = usestate([])
const [loadingdevices, setloadingdevices] = usestate(false)
useeffect(() => {
async function getstats() {
setloadingdevices(true)
try {
const response = await fetch('http://192.168.1.4:8080/api');
const data = response.json();
const transformdata = ... // do whatever you need to do to extract the data you need from the async call
setdevices(transformdata)
setloadingdevices(false)
} catch(e) {
setloadingdevices(false)
}
}
getstats();
}, [setstats, setloadingdevices])
return (
<div classname='container'>
<about />
<avgvisitduration />
{loadingdevices ? <div>loading ...</div> : <devices data={devices} />}
</div>
);
}
export default app;
Source: stackoverflow.com
Related Query
- How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+
- React - How can I pass API data from one component to another in a different js file?
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- How pass a variable from code behind to javascript
- How to pass model object to javascript function in asp.net Core
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- getElementById on element from parent component returns null, when called in ngAfterViewInit() of child component
- How to select and pass array object to data setting of chart.js config?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- how can i reset chartjs object all instances and recreate it from scratch?
- How to write better code in es6 for formatting an object with array values
- How to pass a array from node to .js file (pugJs)
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- how to pass function variable from one file to another in react
- How to get certain text from json object value
- How to parse a Chart using data from a nested object in ChartJS
- Integrate Blazor with Chart.js: how to pass an object
- How to get ChartJs object from dynamically created chart
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- How to run Chart.js samples using source code
- How to make a child component of a sibling component refresh when a button is pressed in ReactJS?
- How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call
- How to clear a chart from a canvas so that hover events cannot be triggered?
- How to remove square label from tooltip and make its information in one line?
- How do I prevent the scale labels from being cut off in chartjs?
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart.js Bar Chart - how to chart bars from 0
- Get Chart js object from selector
- how to change the Y-axis values from float number to integer in chartjs?
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
More Query from same tag
- Chart Js invisible horizontal bar
- Draw a line around a single point in the linechart
- Adjust length of y-axis using chart.js and bootstrap
- Chart js does not load on page
- Getting chart js bar chart to fill window
- calling a function for fontSize in Doughnut Chart (typescript)
- How to display icon arc of doughnut chart with primeVue
- ChartJS - How to add Text between Pie Chart and Legend
- How get sum of total values in stackedBar ChartJs
- Chartjs: Overlapping values when using Datalabels plugin
- how to remove odd number from yaxes in chartjs using angular?
- Chart.js - how to add a second data line to the line graph
- Cannot get react-chartjs to update
- How to change the default barchart colour in chart.JS and angular 7?
- Is it possible to set the background color of a sector in a radar chart in Chart.js?
- Chart.js changes selected legend filters when using update function
- ChartJS x-axis show only months of year
- Chart.js shows no graphs
- Cannot resize chart from chart.js
- Using data in HTML to display ChartJS Doughnut chart
- implementing horizontal bar chart
- How to manipulate different charts by angular
- how to show bar chart for every product
- import Json formatted values to create bar charts with Chart.js
- Vue3 Chart.js not rendering
- Can not update bar chart values in Chart.js 2.0.0 alpha3
- How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+
- Chart JS Show HTML in Tooltip
- How to provide empty values for Chart.js data?
- Chart.js (Customising tool tips of a stacked bar to represent each stacked data)