render() { return ( <TableOfContentsContainer> <ul> {this.nodeListItems()} </ul> </TableOfContentsContainer> ) }
// we render an <ul> w/ a className of 'tree' that displays the return value of invoking renderTree and passing the value stored in props object at the componentTreeObj property render() { let componentTree = []; return ( <ul className="tree"> {this.renderTree(this.props.componentTreeObj)} </ul> ); }
render() { const classes = classnames(this.props.listClassName, { [this.props.uniqueClassName]: this.props.uniqueClassName, }); return <ul className={classes}>{this.getNavigationItems(this.props.items)}</ul>; }
render() { const disks = this.getDisks(); if (disks.length === 0) { return null; } return ( <ul className="sidebar-filter sidebar__item"> <li className="sidebar-filter__item sidebar-filter__item--heading"> <FormattedMessage id="status.diskusage.title" defaultMessage="Disk Usage" /> </li> {disks} </ul> ); }
const GameList = (props) => { const gameList = props.gameList; const listElements = gameList.map(game => ( <li key={game.createdAt}>{game.winner} won at {game.createdAt}</li> )); return ( <div id="gameList"> <h3>Previous matches</h3> <ul> {listElements} </ul> </div> ); }
render() { const tabs = Object.keys(this.props.tabs).map(tabId => { const currentTab = this.props.tabs[tabId]; currentTab.id = tabId; const classes = classnames('modal__tab', { 'is-active': tabId === this.props.activeTabId, }); return ( <li className={classes} key={tabId} onClick={this.handleTabClick.bind(this, currentTab)}> {currentTab.label} </li> ); }); return <ul className="modal__tabs">{tabs}</ul>; }
renderAlerts() { const {alerts} = this.props; if (alerts.length > 0) { return ( <CSSTransition classNames="alerts__list" timeout={{enter: 250, exit: 250}}> <ul className="alerts__list" key="alerts-list"> {this.props.alerts.map(alert => ( <Alert {...alert} key={alert.id} /> ))} </ul> </CSSTransition> ); } return null; }
render() { const filters = this.getFilters(); return ( <ul className="sidebar-filter sidebar__item"> <li className="sidebar-filter__item sidebar-filter__item--heading"> <FormattedMessage id="filter.status.title" defaultMessage="Filter by Status" /> </li> {filters} </ul> ); }
render() { return <ul className={this.props.listClassName}>{this.getNavigationItems(this.props.items)}</ul>; }
render() { const filters = this.getFilters(); if (!this.hasTrackers()) { return null; } return ( <ul className="sidebar-filter sidebar__item"> <li className="sidebar-filter__item sidebar-filter__item--heading"> <FormattedMessage id="filter.tracker.title" defaultMessage="Filter by Tracker" /> </li> {filters} </ul> ); }
render() { if (!this.hasTags()) { return null; } return ( <ul className="sidebar-filter sidebar__item"> <li className="sidebar-filter__item sidebar-filter__item--heading"> <FormattedMessage id="filter.tag.title" defaultMessage="Filter by Tag" /> </li> {this.getFilters()} </ul> ); }
getRulesList() { const {rules} = this.props; if (rules.length === 0) { return ( <ul className="interactive-list"> <li className="interactive-list__item"> <FormattedMessage defaultMessage="No rules defined." id="rules.no.rules.defined" /> </li> </ul> ); } const rulesList = rules.map(rule => this.getRulesListItem(rule)); return <ul className="interactive-list">{rulesList}</ul>; }
getFeedsList() { const {feeds} = this.props; if (feeds.length === 0) { return ( <ul className="interactive-list"> <li className="interactive-list__item"> <FormattedMessage defaultMessage="No feeds defined." id="feeds.no.feeds.defined" /> </li> </ul> ); } const feedsList = feeds.map(feed => this.getFeedsListItem(feed)); return <ul className="interactive-list feed-list">{feedsList}</ul>; }
render() { return ( <TableOfContentsContainer> <ul> {this.nodeListItems()} </ul> </TableOfContentsContainer> ) }
const GameList = (props) => { const gameList = props.gameList; const listElements = gameList.map(game => ( <li key={game.createdAt}>{game.winner} won at {game.createdAt}</li> )); return ( <div id="gameList"> <h3>Previous matches</h3> <ul> {listElements} </ul> </div> ); }