Range error maximum call stack size exceeded during fetch API

September 6, 2022

I’m trying to build a landing page with two doughnut charts and plot data in the chart. Making a ‘POST’ call to fetch data from an API and use that information to chart data in the landing page.I’m currently seeing maximum call stack size exceeded on the line: body.json stringify. I’m a Python guy, trying to learn react JS and front end development. Any directions is much appreciated.

const App=()=> {
const[dataArray, setDataArray] = useState([{"label": "Required configuration", "value": "N/A"}, {"label": "Configuration", "value": 1}]);
const[chartData, setChartData] = useState({labels: ['Graph 1', 'Graph 2'],
datasets: [
    {
      label: 'Plot',
      data: [50,50],
      backgroundColor: [
        'rgba(156,207,163)',
        'rgba(205,185,215)',
      ],
      borderWidth: 1,
      cutout: 60
   }
 ]
})

useEffect( () => {
    fetchURL()
}, [])

  const fetchURL = async ()=> {
    const res = await fetchURL("https://example.com", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic '+btoa('username:password')
      },
      body: JSON.stringify( {
          'search': 'query',
          'output_mode': 'json',
          'preview': false,
      })
   })
      console.log(res)
      const data = await res.json()
      console.log(data.data)
     
      let results = data.data
      setChartData( {
        labels: result.map((crypto) => crypto.Total),
        datasets: [
          {
            data: results.map((crypto) => Number(crypto.Total)),
            backgroundColor: [
              'rbga(156,207,163)',
              'rgba(205,185,215)',
            },
            borderWidth:1,
            cutout: 60
         }
       ]
     });
   setDataArray(results.map((crypto) => (
      {"label": "Configuration", "value": Number(crypto.Total)}
   )))
  }

    return (
      <div className="App">
         <div class="main">
           <div class="header">
              <p> My App </p>
           </div>
         <div class="content">
           <DoughnutChart chartData={chartData}/>
           <DoughnutChart chartData={chartData)/>
         </div>
         <div class="info">
           <div>
           <span>{dataArray[0].label}</span>
           <span>{dataArray[0].value}</span>
           </div>
      </div>
    </div>
 );

}
export default App;