CropChips.tsx

import * as React from 'react';
import {connect} from 'react-redux';
import { withStyles } from 'material-ui/styles';

import {Crop} from 'model/crop.model';

interface ICropChipsProps extends React.ClassAttributes<any> {
    crops: string[];
    availableCrops: Crop[];
    classes?: any;
}

const styles = (theme) => ({
    chipHolder: {
      display: 'inline-block',
      position: 'relative' as 'relative',
      height: '1em',
    },
    chip: {
        display: 'inline-block',
        marginRight: theme.spacing.unit,
        padding: '.2em .5em',
        position: 'relative' as 'relative',
        top: '-.2em',
        border: 'solid 1px Gray',
        borderRadius: '.2em',
        backgroundColor: '#e2e2e2',
        color: 'Black',
    },
});

const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => crops && crops.length > 0 && crops.filter((c) => c !== null).length > 0 && (
    <div className={ classes.chipHolder }>
        { crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.code === c) || c : c).map((crop) => {
          if (! crop) {
            console.log('Null crop in', crops);
            return null;
          } else if (typeof crop === 'string') {
            return <div key={ crop } className={ classes.chip }>{ crop }</div>;
          } else {
            return <div key={ crop.code } className={ classes.chip }>{ crop.title }</div>;
          }
        }) }
    </div>
);

const mapStateToProps = (state) => ({
	availableCrops: state.crop.list,
});

export default connect(mapStateToProps, null)(withStyles(styles)(CropChips));