ApiCollections.jsx

import React from 'react';
import { Api } from 'jetset';

function create( users ) {
  users
    .create({ name: 'foo' })
    .then( data => console.log( 'Successfully created', data ) );
}

function Users({ users }) {
  return (
    <div>
      { users.list().isPending ?
        <span>Loading...</span>
      :
        <span>
          {users.list().data.map( user =>
            <div key={ user.data.id }>
              <span>{ user.data.name }</span>
              <button onClick={ user.delete }>Delete</button>
            </div>
          )}
          <button onClick={() => create( users )}>New foo</button>
          <button onClick={() => users.list().clear()}>Clear cache</button>
        </span>
      }
    </div>
  );
}

export default function ApiCollectionsExample() {
  return (
    <Api url="https://jsonplaceholder.typicode.com" users="/users">
      <Users />
    </Api>
  );
}