SubmitTalkForm.tsx

import * as React from 'react'
import { Formik } from 'formik'
import Yup from 'yup'
import {
  Form,
  FormGroup,
  Col,
  ControlLabel,
  FormControl,
  HelpBlock,
  Button,
  Checkbox
} from 'react-bootstrap'
import * as months from 'months'

const SubmitForm = ({ values, handleChange, handleSubmit, errors, meetups }) =>
  <Form horizontal onSubmit={handleSubmit}>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Talk title
      </Col>
      <Col sm={10}>
        <FormControl
          id="title"
          type="text"
          value={values.title}
          onChange={handleChange}
        />
        <FormControl.Feedback />
        <HelpBlock>
          {errors.title &&
            <div style={{ color: 'red' }}>
              {errors.title}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Wistia link
      </Col>
      <Col sm={10}>
        <FormControl
          id="wistiaLink"
          type="text"
          value={values.wistiaLink}
          onChange={handleChange}
        />
        <FormControl.Feedback />
        <HelpBlock>
          {errors.wistiaLink &&
            <div style={{ color: 'red' }}>
              {errors.wistiaLink}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Meetup link
      </Col>
      <Col sm={10}>
        <FormControl
          id="meetupLink"
          type="text"
          value={values.meetupLink}
          onChange={handleChange}
        />
        <FormControl.Feedback />
        <HelpBlock>
          {errors.meetupLink &&
            <div style={{ color: 'red' }}>
              {errors.meetupLink}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Meetup
      </Col>
      <Col sm={10}>
        <FormControl
          id="meetup"
          componentClass="select"
          placeholder="select"
          value={values.meetup}
          onChange={handleChange}
        >
          <option disabled value="" />
          {meetups.map(m =>
            <option value={m.id} key={m.id}>
              {m.name}
            </option>
          )}
        </FormControl>
        <HelpBlock>
          {errors.meetup &&
            <div style={{ color: 'red' }}>
              {errors.meetup}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Month
      </Col>
      <Col sm={10}>
        <FormControl
          id="month"
          componentClass="select"
          placeholder="select"
          value={values.month}
          onChange={handleChange}
        >
          <option disabled value="" />
          {months.map((m, i) =>
            <option value={m} key={i}>
              {m}
            </option>
          )}
        </FormControl>
        <HelpBlock>
          {errors.month &&
            <div style={{ color: 'red' }}>
              {errors.month}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Speaker name
      </Col>
      <Col sm={10}>
        <FormControl
          id="speakerName"
          type="text"
          value={values.speakerName}
          onChange={handleChange}
        />
        <FormControl.Feedback />
        <HelpBlock>
          {errors.speakerName &&
            <div style={{ color: 'red' }}>
              {errors.speakerName}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <FormGroup>
      <Col componentClass={ControlLabel} sm={2}>
        Speaker email
      </Col>
      <Col sm={10}>
        <FormControl
          id="speakerEmail"
          type="text"
          value={values.speakerEmail}
          onChange={handleChange}
        />
        <FormControl.Feedback />
        <HelpBlock>
          {errors.speakerEmail &&
            <div style={{ color: 'red' }}>
              {errors.speakerEmail}
            </div>}
        </HelpBlock>
      </Col>
    </FormGroup>
    <Button type="submit">Submit</Button>
  </Form>

const formikEnhancer = Formik({
  validationSchema: Yup.object().shape({
    title: Yup.string().required(),
    wistiaLink: Yup.string()
      .matches(
        /https:\/\/pusher-1.wistia.com\/medias\/\w{10}$/,
        'Not a valid Wistia link'
      )
      .required(),
    meetupLink: Yup.string().required('REquired'),
    meetup: Yup.string().required(),
    month: Yup.string().required(),
    speakerName: Yup.string().required(),
    speakerEmail: Yup.string().required()
  }),
  mapPropsToValues: ({ initialState }) => ({
    ...initialState
  }),
  handleSubmit: payload => {
    console.log('payload', payload)
  }
})
export default formikEnhancer(SubmitForm)