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;

Related Query

More Query from same tag