github react

github-react-exercise-answer.js

class Root extends React.Component {
    render() {
        const repos = this.props.response.data;
        return (
            <div>{repos.map(function(repo) { return <p>{repo.name}</p>; })}</div>
        );
    }
}

function connect(url, component) {
    class Wrap extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                response: undefined,
            };
        }

        componentDidMount() {
            $.ajax({
                url: this.props.url,
                method: 'GET',
                dataType: 'jsonp',
                success: (function(response) {
                    this.setState({
                        response,
                    });
                }).bind(this)
            });
        }

        render() {
            const { response } = this.state;
            if (!response) {
                return (<div>Loading...</div>);
            }

            const child = React.createElement(component, { response, });

            return (
                <div>{child}</div>
            );
        }
    }

    return (<Wrap url={url} />);
}

ReactDOM.render(connect('https://api.github.com/users/boertel/repos', Root), document.getElementById('root'));