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 setting properties from an array of objects. I'm also not certain I'm accessing DOM properties correctly in my event handler. I must be missing something rather straightforward.

For reference, here's my code with the rest of the project and here's what it's supposed to look like.

ETA: I had no idea from the docs that babel browser was deprecated so decided to just use straight Javascript with ES5 syntax instead of JSX. Code updated below, but it's still not rendering the markup.

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 (
        <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 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.