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

Question

Totally new to react.js and after going through the tutorial and reading the docs, I\'m still struggling a bit with using js fetch to load my data from a JSON file as well as se

Answer 1

You have tons of syntax errors in your code, I have fixed them for 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 (
        
      );
    });

    return (
      
{canvases}
    );
  }
}

render(
  ,
  content
);

I don't know the response of your API so I'm not sure if there's other to fix.

Some of the problems I have noticed:

• Probably your indentation is wrong, because you had functions with double return statements. I suggest you to enable ESLint in your IDE to catch those errors.

• You have not understood how setState works, you can't just do:

  this.setState({
    foo: 'bar',
    baa: myFn(this.state.foo)
  });
  

  Otherwise, this.state.foo inside myFn will refer to the old value of it, and not to the new one that you are setting right now.
  You'd have to do this.setState({foo: 'bar'}, () => this.setState({baa: myFn(this.state.foo)}), but then, it's better to do as I did in the code I have fixed above.