OxfordComma.jsx

import React from 'react';
import PropTypes from 'prop-types';

export default class OxfordComma extends React.Component {
    render () {
        const count = React.Children.count(this.props.children);

        if (count === 0 || count === 1) {
            return <span>{this.props.children}</span>;
        }
        if (count === 2) {
            return <span>{React.Children.map(this.props.children, (child, ndx) => {
                          if (ndx === 0) {
                              return <span>{child} and </span>;
                          } else {
                              return child;
                          }
                          })}</span>;
        }

        return <span>{React.Children.map(this.props.children, (child, ndx) => {
                      if (ndx < count - 2 ) {
                          return <span>{child}, </span>;
                      } else if (ndx === count - 2) {
                          return <span>{child}, and </span>;
                      } else {
                          return child;
                      }
                      })}</span>;
    }
}