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>{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>Saldo</th>
                        </tr>
                    </thead>
                    <tbody>
                        {entries}
                    </tbody>
                </Table>
            </Fetcher>
        );
    }
}

export default MemberList;