Await doesnt wait till a variable is set in an sync function

Question

I am trying to get dataURI for an image using ApexCharts.exec method, here is my code:

const getDataURI = async() => {

  console.log('leftChartObj', leftChartObj) // gets the data required correctly - essentially an object which is used in the next line; so leftChartID is assigned the value as expected.

  const leftChartID = leftChartObj.props.options.chart.id;

  ApexCharts.exec(leftChartId, 'dataURI' , {scale:1.08}).then(  
  ( async ({imgURI}) => {
     await setSvgLeft(imgURI);          // These methods are inbuilt and I guess async/await isn't needed but I was just trying out.
 
     console.log('svgLeft', svgLeft) // state variable that is set in the above line =
  })
  );

  console.log('method ended', svgLeft) 

}

And this is the output I get:

leftChartObj { 'props': {...}, 'context': {...} , .. } - as expected

method ended null

svgLeft  null

I understand that the code is exiting before the variable is set, then tried async/await. But that didn't help either.

Also, this function is called upon a button click in the UI, if the click the button for the second time everything works as expected.

Answer 1

In React's hook, you need to use useEffect to reach your prompt.
Something like this:

const getDataURI = async() => {

  const leftChartID = leftChartObj.props.options.chart.id;

  ApexCharts.exec(leftChartId, 'dataURI' , {scale:1.08}).then(  
  ( ({imgURI}) => {
     setSvgLeft(imgURI);
 
  })
  );

}

useEffect(() => {
  console.log('svgLeft', svgLeft) // This line will run whenever `svgLeft` change
}, [svgLeft])