MemberList.js

import React from "react";
import { Table } from "react-bootstrap";
import Fetcher from "./Fetcher";
import { printMoney } from "./util";

class MemberList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      members: [],
    };
  }

  render() {
    const entries = this.state.members.map((member) => {
      return (
        <tr key={member.num}>
          <td>{member.num}</td>
          <td>{member.name}</td>
          <td>{member.email}</td>
          <td>{member.phone}</td>
          <td>{printMoney(member.balance)} €</td>
        </tr>
      );
    });

    return (
      <Fetcher
        url="/api/member"
        onFetch={(members) => this.setState({ members })}
      >
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>Numero</th>
              <th>Nombre</th>
              <th>Email</th>
              <th>Telefono</th>
              <th>Saldo</th>
            </tr>
          </thead>
          <tbody>{entries}</tbody>
        </Table>
      </Fetcher>
    );
  }
}

export default MemberList;