javascript - React.js: loading JSON data with Fetch API and props from object array -

totally new react.js , after going through tutorial , reading docs, i'm still struggling bit using js fetch load data json file setting properties array of objects. i'm not i'm accessing dom properties correctly in event handler. must missing rather straightforward.

for reference, here's code rest of project , here's it's supposed like.

eta: had no idea docs babel browser deprecated decided use straight javascript es5 syntax instead of jsx. code updated below, it's still not rendering markup.

var canvasanimation = react.createclass({      getinitialstate: function() {          return {data: []};      },                                  loaddata: function() {          /*          fetch("data.json")              .then(function(response) {                  return response.json                          .then(function(json){                          this.setstate({data: json});                      }.bind(this))              }.bind(this));          */          const data = [              { id: "stalkerone", width: 225, height: 434, spritesheeturl: 'spritesheets/stalkerone.jpg', rows: 5, columns: 5, totalframes: 24 },              { id: "stalkertwo", width: 175, height: 432, spritesheeturl: 'spritesheets/stalkertwo.jpg', rows: 6, columns: 5, totalframes: 26 },              { id: "stalkerthree", width: 251, height: 432, spritesheeturl: 'spritesheets/stalkerthree.jpg', rows: 6, columns: 5, totalframes: 28 }          ];      },      componentdidmount: function() {          this.loaddata();      },      componentdidupdate: function() {          function animation(json) {              return json.map(function(data) {                  return(                      new canvassprite(                          document.getelementbyid(data.id),                          data.width,                          data.height,                          data.spritesheeturl,                          data.rows,                          data.columns,                          data.totalframes)                  );              });          };          this.setstate({animaton: animation(this.state.data)});        },      handleinteraction: function(event, index) {          var offsety = event.clienty - event.node.getboundingclientrect().top;          var rely = offsety/this.state.data.height;          this.props.animation[index].setframe(rely);      },      render: function() {          var canvases = this.state.data.map(function(data, index) {              return (                  react.createelement('canvas',                                       id = data.id,                                      width = data.width,                                      height = data.height,                                      style = 'border:5px solid white',                                      onmouseover= this.handleinteraction(event, index))              );          });          return(              react.createelement('div', canvases)          );      }  });            reactdom.render(      react.createelement(canvasanimation, null),      document.getelementbyid('content')  ); 

you have tons of syntax errors in code, have fixed them you.

const { component } = react; const { render } = reactdom;  class canvasanimation extends component {   state = {     data: []   };    loaddata() {     function animation(json) {       return json.map(function(data) {         return (           new canvassprite(             document.getelementbyid(data.id),             data.width,             data.height,             data.spritesheeturl,             data.rows,             data.columns,             data.totalframes           )         );       });     }     fetch("data.json")       .then(response => response.json())       .then(json => {         console.log(json);         this.setstate({           data: json,           animation: animation(json)         });       });   }    componentdidmount() {     this.loaddata();   }    handleinteraction(e) {     var offsety = e.clienty - e.node.getboundingclientrect().top;     var rely = offsety/this.state.data.height;     this.props.animation.setframe(rely);   }    render() {     var canvases = this.state.data.map(function(data) {       return (         <canvas           id={data.id}            width={data.width}            height={data.height}           style={{border: '5px white'}}           onmouseover={this.handleinteraction}         />       );     });      return (       <div>{canvases}</div>     );   } }  render(   <canvasanimation />,   content ); 

i don't know response of api i'm not sure if there's other fix.

some of problems have noticed:

• probably indentation wrong, because had functions double return statements. suggest enable eslint in ide catch errors.

• you have not understood how setstate works, can't do:

  this.setstate({   foo: 'bar',   baa: myfn(this.state.foo) }); 

  otherwise, this.state.foo inside myfn refer old value of it, , not new 1 setting right now.
  you'd have this.setstate({foo: 'bar'}, () => this.setstate({baa: myfn(this.state.foo)}), then, it's better did in code have fixed above.