Value from Selector doesn't work with Formik and Yup validation

Question

There is a Create Company page where a user must introduce data in some fields which are validated by Formik and Yup in order to create an entry. All fields all required.

The problem is with the fields which are not introduced by writing inside a input but are selected from a dropdown. No matter what is selected, the value is not used and the entry is not created saying that this field is required.

This is the code:

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { Input, Button, Select, Label, Grid } from 'semantic-ui-react';
import * as Yup from 'yup';

class CreateCompanyForm extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      industry: '',
    };
  }

  handleSubmitCreate = e => {
    e.preventDefault();
    const { createCompany, getCompanies } = this.props;
    createCompany(this.state);
    this.setState({ redirectCreate: true });
    getCompanies(this.props.query);
  };

  render() {
    const industryOptions = [
      { text: 'Retail', value: 'Retail' },
      { text: 'Food', value: 'Food' },
    ];

    const initialValues = {
      name: '',
      industry: '',
    };
    const requiredErrorMessage = 'This field is required';
    const validationSchema = Yup.object({
      name: Yup.string().required(requiredErrorMessage),
      industry: Yup.string().required(requiredErrorMessage),
    });
    return (
      <Layout create>
        <OneColumn>
          <div>
            <Button type="submit" form="amazing">
              Create company
            </Button>
          </div>
        </OneColumn>

        <Formik
          htmlFor="amazing"
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={values => this.handleSubmit(values)}>
          {({ values, errors, touched, setValues }) => (
            <Form id="amazing">
              <Grid columns={2}>
                <Grid.Column>
                  <Label>Company Name</Label>
                  <Field name="name" as={Input} placeholder="Hello" />
                  <div>{touched.name && errors.name ? errors.name : null}</div>
                </Grid.Column>

                <Grid.Column>
                  <Label>Industry</Label>
                  <Field
                    name="industry"
                    as={Select}
                    options={industryOptions}
                    placeholder="Food service"
                  />
                  <div className="add-fridge-error">
                    {touched.industry && errors.industry
                      ? errors.industry
                      : null}
                  </div>
                </Grid.Column>
              </Grid>
            </Form>
          )}
        </Formik>
      </Layout>
    );
  }
}

Any ideas why for name an Input it works fine but for industry which is a Select it doesn't?

domenikk domenikk · Accepted Answer · 2020-08-19T18:49:08

It doesn't work with Select because Formik doesn't know how to set it's value. You'll need to implement it yourself:

<Field
    name="industry"
    as={Select}
    options={industryOptions}
    placeholder="Food service"
    onChange={(e) => setFieldValue("industry", e.target.value)}
/>

Destructure setFieldValue from the Form render props.

Value from Selector doesn't work with Formik and Yup validation

1 Answers