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

Ok... Here's the working project. Got some help from @gumingfeng and @hkal.

Lessons learned:

1. The React docs are ridiculously outdated.
2. Straight JS vs. JSX is really no worse imo.
3. Corrected some syntax errors in Fetch.
4. Object array needs to be instantiated after data is loaded in order to pass DOM references in the constructors.
5. However, calling setState() inside componentDidUpdate() triggers an infinite loop so had to set the object array directly and independently from state.
6. When creating DOM elements from an array, React does not automatically assign the event handler to the particular element. In other words, it must be passed the array index so that can be used to access its values in the arrays.

Whew, I think that's it. Hope this helps others.

And I would just conclude by saying, give React a try without JSX. It's really not that bad :)

const { Component } = React;
const { render } = ReactDOM;

class CanvasAnimation extends Component {
    
    constructor(){
        super();
        this.state = {
            data: []
        };
    };
    
    componentDidMount() {
        fetch("data.json")
            .then( (response) => {
                return response.json() })   
                    .then( (json) => {
                        this.setState({data: json});
                    });
    };
    
    componentDidUpdate() {
        function animation(json) {
            return json.map( (data) => {
                return(
                    new CanvasSprite(
                        document.getElementById(data.id),
                        data.width,
                        data.height,
                        data.spriteSheetURL,
                        data.rows,
                        data.columns,
                        data.totalFrames)
                );
            });
        };
        //this.setState({animation: animation(this.state.data)}); //causes infinite loop
        this.animation = animation(this.state.data);
    };
    
    handleInteraction(event, index) {
        var offsetY = event.clientY -  document.getElementById(this.state.data[index].id).getBoundingClientRect().top;
        var relY = offsetY/this.state.data[index].height;
        this.animation[index].setFrame(relY);
    };
    
    render() {
        var canvases = this.state.data.map( (data, index) => {
            return (
                React.createElement('canvas', 
                                    {id : data.id,
                                    width : data.width,
                                    height : data.height,
                                    //style : {border: '5px solid white'},
                                    onMouseMove : (event) => this.handleInteraction(event, index)}
                                    )
            );
        });
        return(
            React.createElement('div', null, ...canvases)
        );
    };
    
};
  
    
render(
    React.createElement(CanvasAnimation, null),
    document.getElementById('content')
);