occsn-checkout/app/components/Order/Attendees/Attendee.jsx

Occasion checkout experience boilerplate component built using React-Redux and Mitragyna

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import { Field } from 'mitragyna';

import s from 'underscore.string';

import occsn from '../../../libs/Occasion';

import { Card, CardBody, CardTitle, Label, FormGroup, Input } from 'reactstrap';

export default class Attendee extends PureComponent {
  static propTypes = {
    indexOf: PropTypes.number.isRequired,
    questions: PropTypes.shape({
      __collection: PropTypes.arrayOf(PropTypes.string)
    }).isRequired,
    subject: PropTypes.instanceOf(occsn.Attendee).isRequired,
  };

  render() {
    let { indexOf, questions } = this.props;

    return <Card className="attendee-container">
      <CardBody className="attendee">
        <CardTitle className="attendee-title">
          Attendee { indexOf + 1 }
        </CardTitle>
        {
          questions.map((q) => {
            return <FormGroup className="attendee-input-container">
              <Label for={'attendee-' + indexOf + '-' + q}>{s.humanize(q)}</Label>
              <Field type='text' name={q} id={'attendee-' + indexOf + '-' + q} component={Input} invalidClassName='is-invalid'></Field>
            </FormGroup>;
          }).toArray()
        }
      </CardBody>
    </Card>;
  }
}