block13.javascript

// Clients.jsx

import React from 'react';

class Clients extends React.Component {
    // Request the server data
    componentDidMount() {
        this.props.getClients();
    }

    _reverseOrder = () => this.props.toggleSorting();

    render() {
        return (
            <div>
                <button type="button" onClick={this._reverseOrder}>
                    Reverse order
                </button>
                <ul>
                    {/* We now use the clients array that comes from the props */}
                    {this.props.clients.map(client => <li key={client.id}>{client.name}</li>)}
                </ul>
            </div>
        );
    }
}

export default Clients;