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

class Quantity extends React.Component {
  render() {
    return (
      <div className="container__row figure -left -center">
        <div className="figure__media">
          <div className="quantity">{this.props.quantity}</div>
        </div>
        <div className="figure__body">
          {this.props.noun && this.props.verb ?
            <h4 className="reportback-noun-verb">{this.props.noun} {this.props.verb}</h4>
            : null}
        </div>
      </div>
    );
  }
}

Quantity.propTypes = {
  noun: PropTypes.string,
  quantity: PropTypes.string,
  verb: PropTypes.string,
};

Quantity.defaultProps = {
  noun: 'things',
  quantity: 0,
  verb: 'done',
};

export default Quantity;

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

class Quantity extends React.Component {
  render() {
    return (
      <div className="container__row figure -left -center">
        <div className="figure__media">
          <div className="quantity">{this.props.quantity}</div>
        </div>
        <div className="figure__body">
          {this.props.noun && this.props.verb ?
            <h4 className="reportback-noun-verb">{this.props.noun} {this.props.verb}</h4>
            : null}
        </div>
      </div>
    );
  }
}

Quantity.propTypes = {
  noun: PropTypes.string,
  quantity: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
  verb: PropTypes.string,
};

Quantity.defaultProps = {
  noun: 'things',
  quantity: 0,
  verb: 'done',
};

export default Quantity;

Handle int and string quantity validation
Handle int and string quantity validation
