import React from 'react'; import PropTypes from 'prop-types'; import { Table } from 'react-bootstrap'; export default class TeamPlayers extends React.Component { static propTypes = { teamPlayers: PropTypes.array.isRequired, allCollections: PropTypes.object.isRequired, collectionId: PropTypes.string.isRequired }; static contextTypes = { theme: PropTypes.object }; renderTeamPlayers = () => { const { teamPlayers, allCollections, collectionId } = this.props; const currentCollection = allCollections[collectionId] || teamPlayers; return currentCollection.map((player, index) => { if (player) { const { id, name, position, rating } = player; return ( <tr key={id}> <td>{index + 1}</td> <td>{position}</td> <td>{name}</td> <td>{rating}</td> </tr> ); } return ''; }); }; render() { const { theme } = this.context; return ( <div className="myTeamBox"> <Table striped borderless hover variant="dark" id="team_players" style={{ background: theme.accentDarker2 }} > <thead> <tr> <th>#</th> <th>Pos</th> <th>Name</th> <th>Rating</th> </tr> </thead> <tbody>{this.renderTeamPlayers()}</tbody> </Table> </div> ); } }