React App function

class JsonFetcher extends Component {
    constructor(props) {
        super(props);
        this.child = React.createRef();
        console.log('Constructor was called')
        this.state = {
            data: [],
        }
    }

    componentDidMount() {
        console.log('CompDidMount was called')
        this.updateContent(this.props.mainUrl)
    }

    updateContent(mainUrl){
        console.log("updateContent was called")
        fetch(mainUrl)
            .then((responseJsonAnyUrl) => responseJsonAnyUrl.json())
            .then((responseJsonAnyUrl) => {
                this.setState({
                    mainUrl: mainUrl,
                    jsonObject: responseJsonAnyUrl
                },
                function testName(){
                    if(this.child.current){
                        let interval = 20000
                        let ind = this.child.current.getCurrentIndex()
                        let zlengths = this.child.current.getZoneLengths()
                        let option = 1
                        if (ind !== zlengths[0]-1){
                            //didn't iterate trough all content, can't update
                            option=2
                            interval = 5000
                        }
                        console.log('ind', ind)
                        console.log('len', zlengths[0]-1)
                        console.log('interval', interval)
                        this.timeout = setTimeout(
                            function(){
                                if (option===1){
                                    this.updateContent(this.state.mainUrl)
                                }else if (option===2){
                                    testName()
                                }
                            }.bind(this, this.state.mainUrl)
                            ,
                            interval)
                    }
                })
            })
    }


    interpretJson() {
        console.log('interpretJson was called')
        var contentListArray = []
        if (this.state.jsonObject !== undefined) {
            this.state.jsonObject.zones.map((mainzoneObj, index) => {
                Object.values(mainzoneObj).map((zone, index2) => {   /*( {*/
                    var contentList= []
                    zone.map((zoneObj, index3) => {
                        contentList.push({type: "clear",
                                            url: "",
                                            duration: 0})

                        contentList.push({type: zoneObj.type,
                                            url: zoneObj.url,
                                            duration:zoneObj.duration})
                    })
                    console.log(contentList)
                    contentListArray.push(contentList)
                })
            })
        }

        return(
            <Display content={contentListArray} ref={this.child}/>
        )
    }


    render() {
        console.log('Render was called')
        if(this.state.jsonObject){
            return (
                <div>
                    <div>
                        { //no point calling this before JsonObject is defined
                            this.interpretJson()
                        }
                    </div>
                </div>
            )
        }else
            return(
                null
            )
    }
}