javascript Fetch2.js

Posted 2021-05-04

import React, { Component } from 'react';
import Fetch from 'react-fetch-component';

/*
  Common pattern is to encapsalate the URL within a component
  and pass the remaining props to <Fetch />
*/

function Fetch2({ username, ...rest }) {
  const url = `https://api.github.com/users/${username}/repos`;

  return <Fetch url={url} {...rest} />
}

export default class DataComponentExample extends Component {
  render() {
    return (
      <div>
        <h1>Data Component</h1>
        <Fetch2 username="manniru">
          {({ loading, data, error }) => (
            <div>
              {loading && <span>Loading...</span>}
              {data && data.map((d, i) => <div key={i}>{d.name}</div>)}
            </div>
          )}
        </Fetch2>
      </div>
    );
  }
}