Connect two elements with htmlFor in React

Question

There is a Formik form with a button which works fine and has this structure:

class CreateProviderForm extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit = values => { // this is called when the button is clicked
    ...
  };

  render() {
   
    const initialValues = {
        name: '',
        phone: '',
    };
    const requiredErrorMessage = 'This field is required';
    const validationSchema = Yup.object({
      name: Yup.string().required(requiredErrorMessage),
      phone: Yup.string().required(requiredErrorMessage),
     
    });
    return (
      <Layout>
        <ContentContainer name="Create Provider">
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setValues }) => (
              <Form>
                <Grid>
                  <Grid.Column>
                    <Label>Provider Name</Label>
                    <Field
                      name="name"
                      as={Input}
                      placeholder="Add provider name"
                    />
                    <div>
                      {touched.name && errors.name ? errors.name : null}
                    </div>
                    <Label>Contact Phone</Label>
                    <Field
                      name="phone"
                      country="fr"
                      as={PhoneInput}
                      onChange={e =>
                        setValues({
                          ...values,
                          phone: e,
                        })
                      }
                    />
                    <div>
                      {touched.phone && errors.phone ? errors.phone : null}
                    </div>   
                    <Button type="submit"> // here is the button, inside Formik
                      SUBMIT
                    </Button>               
                  </Grid.Column>
                </Grid>
              </Form>
            )}
          </Formik>
        </ContentContainer>
      </Layout>
    );
  }
}

I want to move the button outside of the ContentContainer , the only way I know about is using htmlFor for this.

So I've moved the button outside, add to the button id="amazing" and to the formik: htmlFor="amazing" but it doesn't work.

Here it is:

...
return (
      <Layout>
        <Grid.Column>
          <Buttontype="submit" id="amazing"> // here is the id
            Create provider
          </Button>
        </Grid.Column>
        <ContentContainer name="Create Provider">
          <Formik
            htmlFor="amazing" // here is htmlFor
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setValues }) => (
              <Form>
                <Grid>
                  <Grid.Column>
                    <Label>Provider Name</Label>
                    <Field
                      name="name"
                      as={Input}
                      placeholder="Add provider name"
                    />
                    <div>
                      {touched.name && errors.name ? errors.name : null}
         

       </div>

...

Any ideas about how to connect the button to that element and the submit still working?

Answer 1

Assuming the Form component eventually passes props down to a form element, then you can likely provide an id prop to the form and a form prop to the button.

...
return (
      <Layout>
        <Grid.Column>
          <Button type="submit" form="amazing"> // <-- point to form
            Create provider
          </Button>
        </Grid.Column>
        <ContentContainer name="Create Provider">
          <Formik
            htmlFor="amazing" // here is htmlFor
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleSubmit(values)}>
            {({ values, errors, touched, setValues }) => (
              <Form id="amazing"> // <-- set the form id here
                <Grid>
                  <Grid.Column>
                    <Label>Provider Name</Label>
                    <Field
                      name="name"
                      as={Input}
                      placeholder="Add provider name"
                    />
                    <div>
                      {touched.name && errors.name ? errors.name : null}
         

       </div>