How to use formik - 10 common examples

it('should return context with passed values', () => {
    const context = useFormikContext<{ age: number, ... }>();

    (context.values.age: number);
    // $ExpectError: check any
    (context.values.age: string);
  });
});

export default function Pod(props: StepperFormTargetProps) {
  const { errors, touched, values }: FormikCtx = useFormikContext()
  const { handleActionChange } = props

  return (
    <>
       {}} // Delay the form validation with an empty func. If don’t do this, errors will appear early
      >
        {actions.map((option: string) => (
          <menuitem value="{option.split('">
            {toTitleCase(option)}</menuitem>

const mapStateToProps = (state: RootState, ownProps: FilledTextFieldProps & FieldProps) => {
  const {
    field: { name },
    form: { touched, errors, submitCount },
  } = ownProps;
  const isDisplayDebounceError = getIsDisplayDebounceError(state, name);
  const error = getIn(errors, name);
  // https://github.com/formium/formik/issues/691#issuecomment-446509600
  const _touched = getIn(touched, name) || submitCount > 0;

  return {
    showError: !!error && (_touched || isDisplayDebounceError),
  };
};

useEffect(() => {
    resetOtherChaos(formikCtx, 'StressChaos', false)

    if (getIn(values, 'target.stress_chaos.stressors.cpu') === null) {
      setFieldValue('target.stress_chaos.stressors.cpu', defaultExperimentSchema.target.stress_chaos.stressors.cpu)
    }

    if (getIn(values, 'target.stress_chaos.stressors.memory') === null) {
      setFieldValue(
        'target.stress_chaos.stressors.memory',
        defaultExperimentSchema.target.stress_chaos.stressors.memory
      )
    }

    // Remove another when choosing a single action
    return () => {
      if (actionRef.current === 'CPU') {
        // Because LabelField will set value when before unmount, it's needed to wrap setFieldValue into setTimeout
        setTimeout(() => setFieldValue('target.stress_chaos.stressors.memory', null))
      } else if (actionRef.current === 'Memory') {

export const SelectUsers = ({
    isMulti = true,
    className = "",
    ...props
}: {
    isMulti?: boolean;
    name: string;
    className?: string;
    [key: string]: any;
}) => {
    const [, meta, helpers] = useField(props);
    const { value } = meta;
    const { setValue } = helpers;

    const { data } = useBetterQuery>(
        ["listUsers", {}, 1],
        api.users.list,
        {
            refetchOnWindowFocus: false,
        }
    );

    // react-select requires an `options` field of a special type. These hooks handle this.
    const [usersOptions, setUsersOptions] = useState<
        OptionsType<{ value: string; label: string }>
    >([]);

export const RatingField = ({ question, label, ...props }) => {
    // @ts-ignore
    const [field, meta, helpers] = useField(props);

    const setValue = (value) => {
        field.value[question.id] = value;
        helpers.setValue(field.value);
    };

    if (meta.touched &amp;&amp; meta.error) return <p>{meta.error}</p>
    return (
        
            {Array.from(Array(5).keys()).map((index) =&gt;
                <button style="{{"> setValue(index + 1)}
                &gt;
                    {(index &lt; field.value[question.id])</button>

export default function IO(props: StepperFormTargetProps) {
  const { values, errors, touched }: FormikCtx = useFormikContext()
  const { handleActionChange } = props

  return (
    <>
       {}} // Delay the form validation with an empty func. If don’t do this, errors will appear early
      >
        {actions.map((option: string) => (
          <menuitem value="{option}">
            {toTitleCase(option)}
          </menuitem>

export default function Time() {
  const formikCtx: FormikCtx = useFormikContext()
  const { errors, touched } = formikCtx

  useEffect(() => {
    resetOtherChaos(formikCtx, 'TimeChaos', false)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>

it('should work properly', () => {
    (isFunction(() => {}): boolean);
    (isObject({}): boolean);
    (isInteger(1): boolean);
    (isString(''): boolean);
    (isNaN(1 / 0): boolean);
    (isEmptyChildren([]): boolean);
    (isPromise(Promise.resolve(1)): boolean);
    (isInputEvent({}): boolean);

    (getActiveElement(document): Element | null);

    getIn({ a: { b: 2 } }, ['a', 'b']);
    setIn({ a: { b: 2 } }, 'a', 3);
    setNestedObjectValues({}, 1);
  });
});

it('should work properly', () => {
    (isFunction(() => {}): boolean);
    (isObject({}): boolean);
    (isInteger(1): boolean);
    (isString(''): boolean);
    (isNaN(1 / 0): boolean);
    (isEmptyChildren([]): boolean);
    (isPromise(Promise.resolve(1)): boolean);
    (isInputEvent({}): boolean);

    (getActiveElement(document): Element | null);

    getIn({ a: { b: 2 } }, ['a', 'b']);
    setIn({ a: { b: 2 } }, 'a', 3);
    setNestedObjectValues({}, 1);
  });
});