title: Fetching Data in a chartJS
body: <p>I'm basically trying to fetch data from by back-end server(python) and I've created my chart front-end, basically I was using the useState hook to store the data I'm getting, so when I receive updated data the chart updates. Sadly I've been trying to do that for a long time with no success. the &quot;data&quot; variable inside the useState always returns null or undefined in console log, using it in chart results in [object object]</p>
  <p>this here is my homepage code(in react-typescript) I've used the useEffect to render my chart</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Home() {
    
    const [data, setData] = React.useState([]);
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response =&gt;{
      console.log(response);
      return response.json();
    })
    .then (response =&gt;{
      console.log(response);
      setData(response)
      // console.log(setData(response))
    })
    useEffect(() =&gt; {
       
      const ctx = document.getElementById('myChart') as HTMLCanvasElement;
      const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: [ {data}, {data}, 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
            
          }]
        },
        
        options: {
          maintainAspectRatio: false,
          responsive: true,
          
          layout:{
            
            padding:{ 
              left:800,
              top:0
            }
          },
          scales: {
            y: {
              beginAtZero: true
            }
          }
          
        }
        
      });
      
    
      return () =&gt; {myChart.destroy()}}, []);
      
      
      
      return(
          HTML Page)</code></pre>
  </div>
  </div>
  </p>