example of function component with full settings

jsx

import React from "react";
import PropTypes from "prop-types";
import Chip from "material-ui/Chip";
import { withStyles } from "material-ui/styles";

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: ".2em"
  }
});

const TagsFormatter = props => {
  const { classes } = props;

  const renderTags = props.value.map(t => (
    <Chip key={t} label={t} className={classes.chip} />
  ));

  return (
    <div className={classes.root}>
      {renderTags.length > 0 && renderTags}

      {renderTags.length === 0 && <span>-----</span>}
    </div>
  );
};

TagsFormatter.propTypes = {
  value: PropTypes.array.isRequired,
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TagsFormatter);