score:2

Accepted answer

i think you just need to be using state properly:

export const overviewchart = () => {
  type datevalue = {
    x: number,
    y: number
  }

const [data, setdata] = react.usestate([]);
react.useeffect(() => {
  let results = [];
  const fetchfromurl = async() =>{
    const response = await fetch(`${process.env.public_url}/tempdata/monthly.csv`)
    const responsetext = await response.text();
    const parsedresponse = readstring(responsetext);

    parsedresponse.data.foreach(x => {
        results.push( {x: number(new date(x[0])), y: number(x[1]) } )
    })
    setdata(results);
  }

  fetchfromurl();
}, []);
  return(
    <chart data={data} currentvalue={1840.87}/>
  );
} 

it should re-render automatically doing it this way, if not that i would just not render the chart until you have data:

  return data.length ? (
    <chart data={data} currentvalue={1840.87}/>
  ) : 'loading...';

score:0

  1. you need to put data onto state. for that, you need to rewrite the stateless component to inherit react.component. another way is to call forceupdate, which is not recommended.
  2. until the data are fetched, you need to render an empty component or loading spinner. once the fetch is successful, you need to call setstate and that will call render method again and draw charts correct.

score:1

you need to implement a loading verification on your component return. here is a simple-sample:

import react from 'react'

export const componentname = () => {

  //react hooks
  const [isloading, setisloading] = react.usestate(true)

  const fetchfromurl = async() =>{
    const response = await fetch(`your fetch`)
    //other operations

    //when job operations done loading is defined as false
    setisloading(false)
    }

  fetchfromurl();
  
  return(
    !isloading? // = !(isloading === true) => false; when isloading false, return false 
      <component data={"data"} otherprops="props"/>
      : null //or (not recommended)
    //<loadingcomponent /> // (recomended) or
    //<spinningloadingcomponent /> // (recommended)
    // is recommended to see loading when user call this component
  );
} 

Related Query

More Query from same tag