template typescript

api.tsx

import * as React from 'react';
import './App.css';

const baseURL = 'http://www.sfu.ca/bin/wcm/course-outlines';

interface MyProps {}

interface Data {
    text: string;
    value: number;
}

interface MyState {
    years: Data[];
    error: boolean;
}

class Api extends React.Component<MyProps, MyState> {
    
    constructor(props: MyProps) {
        super(props);
        this.state = { years: [], error: false };
        this.revealResults = this.revealResults.bind(this);
    }

    componentDidMount() {
        fetch(baseURL)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Something went wrong ...');
                }
            })
            .then(data => {
                this.setState({ years: data });
            })
            .catch(error => this.setState({error}));   
    }

    getYears() {
            return baseURL;
    }

    revealResults() {
        // return <p>{this.state.years[0]}</p>;
       global.console.log('hello ' + this.state.years[0].value);
    }
    
    render() {
        return (
            <div className="Api">
                <button onClick={this.revealResults}>Reveal</button>
            </div>
        );
    }
}

export default Api;