How to use datalist input with Formik?

Question

I am trying to use datalist in a formik form with ReactJS. I am trying to show a list of array dynamically in datalist option in formik form. So, I have done as below:

<Formik
initialValues={initialValues}
validationSchema={AddEmployeeFormValidationSchema}
onSubmit={props.handleSubmitMethod}
>
{(formikProps) => (
  <Form onSubmit={formikProps.handleSubmit}>
  
    <div className="form-row">
      <Col>
        <FormGroup>
          <label>Designation</label>

          <Field
            type="text"
            name="designation"
            list="designations"
            id="designation"
        
          >
            <datalist id="designations">
              {props.designations.map((designation) => {
                return (
                  <option
                    value={`${designation.id}`}
                    key={`${designation.id}`}
                  >
                    {`${designation.designation_title}`}
                  </option>
                );
              })}
            </datalist>
         
          </Field>
          <ErrorMessage
            name="designation"
            component="div"
            className="text-danger"
          />
        </FormGroup>
      </Col>
     
    <div className="form-row mt-3 text-right">
      <Col>
        <Button
          className="primary-color"
          type="submit"
          disabled={!formikProps.dirty || formikProps.isSubmitting}
        >
          Submit
        </Button>
      </Col>
    </div>
  </Form>
)}
</Formik>

But it shows me the following error:

Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

Is it possible to use datalist with formik?

Answer 1

The datalist element shouldn't be a child of the input component, but is rather referenced by id. Place the datalist element next to the Field component and it should work.

<Field
  type="text"
  name="designation"
  list="designations"
  id="designation"
/>
<datalist id="designations">
  {props.designations.map((designation) => {
    return (
      <option
        value={`${designation.id}`}
        key={`${designation.id}`}
      >
        {`${designation.designation_title}`}
      </option>
    );
  })}
</datalist>