reactjs - Why is this bar chart using chart.js not rendering in react.js? -

i'm trying add bar chart app arbitrary data can't render. it's imported correctly , i've used example code chart.js web site no luck. missing?

import chart 'chart.js'; import react, { component } 'react';  class chartteamone extends component { setstate(){   const t1chartel= document.getelementbyid("teamonecanvas");   let teamonechart = new chart(t1chartel,{   type: 'bar',   data: {     labels: ["red", "blue"],     datasets: [{         label: '# of votes',         data: [12, 19],         backgroundcolor: [             'rgba(255, 99, 132, 0.2)',             'rgba(54, 162, 235, 0.2)',         ],         bordercolor: [             'rgba(255,99,132,1)',             'rgba(54, 162, 235, 1)',         ],         borderwidth: 1     }] }, options: {     scales: {         yaxes: [{             ticks: {                 beginatzero:true             }         }]     } } }); } render(){ return(   <canvas id="teamonecanvas"></canvas> ); } }  export default chartteamone; 

this because have in setstate function , not setting state of anything. should in componentdidmount() lifecycle function.

setstate() used update state of application https://facebook.github.io/react/docs/component-api.html componentdidmount() fire once component mounted after initial rendering occurs , perform functions inside. https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount