Container and component

CustomListItem.js

import React, { PropTypes } from 'react'

import styles from './index.style.css'

const CustomListItem = ({ onClick, leftContent, rightContent, ...props }) => {
  return (
    <div className={styles.container} onClick={onClick} {...props}>
      <div className={styles.left}>{leftContent}</div>
      <div className={styles.right}>{rightContent}</div>
    </div>
  )
}

CustomListItem.propTypes = {
  onClick: PropTypes.func,
  leftContent: PropTypes.element.isRequired,
  rightContent: PropTypes.element
}

export default CustomListItem

ServiceList.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import { bindActionCreators } from 'redux'
import { sortBy } from 'lodash'
import { Card } from 'react-toolbox/lib/card'
import { Button } from 'react-toolbox/lib/button'

import CustomListItem from 'components/CustomListItem'
import CustomListItemLeft from 'components/CustomListItemLeft'
import { actionCreators as serviceActionCreators, getServicesSortedByListText } from 'reducers/serviceReducer'

import styles from './index.style.css'


const mapStateToProps = (state, ownProps) => ({
  services: getServicesSortedByListText(state)
})

const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(serviceActionCreators, dispatch)
})

export class ServiceList extends Component {
  static propTypes = {
    services: PropTypes.array.isRequired,
    router: PropTypes.object.isRequired,
    children: PropTypes.node
  }

  _navigateToEdit = (objectId) => this.props.router.push(`/service/${objectId}`)

  _navigateToNew = () => this.props.router.push('/service/new')

  _renderRow = ({ objectId, listText, hasDateTime, category, hasLocation, formText }) =>
    <CustomListItem
      key={objectId}
      onClick={() => this._navigateToEdit(objectId)}
      leftContent={
        <CustomListItemLeft
          title={'listTextTest'}
          subtitles={[formText]}
          icon={'room_service'}
        />
      }
      rightContent={
        <div className={styles.listItemRight}>
          {hasDateTime ? <i className={'material-icons'}>place</i> : null}
          {hasLocation ? <i className={'material-icons'}>alarm</i> : null}
        </div>
      }
    />

  render () {
    return (
      <div className={styles.container}>
        <Card className={styles.list}>
          {this.props.services.map(this._renderRow)}
        </Card>
        <Button
          icon={'add'}
          floating={true}
          className={styles.fab}
          accent={true}
          onClick={this._navigateToNew}
        />
      </div>
    )
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ServiceList))