We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SyncFusion with Formik

Good morning,

I am switching over from Angular and trying to figure out the best way to switch an enterprise application (100+ forms) to React.  We were considering using syncfusion and had also heard good things about Formik.  I was wondering if anyone had experience with the two together.  The most basic components seem to work, but components such as the DropDownListComponent or DateTimePickerComponent do not.  What we are hoping to accomplish is easy, non-repetitive data binding and validation.  

Correctly binds data to form:
<Field component="input" className="e-input" name="name" type="text" placeholder="Rule Name" />
Doesn't bind data to form:
<Field component={DropDownListComponent} name="ruleTypeId" fields={{ text: 'name', value: 'ruleTypeId' }} dataSource={this.ruleTypes} />

Thanks for any ideas or suggestions!

2 Replies

DS Darrel Schreyer June 8, 2020 08:17 PM UTC

Did you manage to work this out?

BC Berly Christopher Syncfusion Team June 9, 2020 02:05 PM UTC

Hi Mike/ Darrel,   
Greetings from Syncfusion Support.   
We have prepared a sample with dropdownlist using Formik plus Yup to handle forms and validation. In the form validation we have used “formik”, can you please check the below code and use it your application?   
const formikEnhancer = withFormik({   
  validationSchema: Yup.object().shape({   
    valid: Yup.string().required("Value is required!")   
  mapPropsToValues: props => ({   
    valid: []   
  handleSubmit: (values, { setSubmitting }) => {   
  displayName: "MyForm"   
const MyForm = props => {   
  const {   
  } = props;   
  return (   
<form onSubmit={handleSubmit}>   
    <MySelect value={values.valid}   
              touched={touched.valid} />   
    <button type="submit" disabled={isSubmitting}>   
const options = [   
  { Id: "Game1", Game: "American Football" },   
  { Id: "Game2", Game: "Badminton" },   
  { Id: "Game3", Game: "Basketball" },   
  { Id: "Game4", Game: "Cricket" },   
  { Id: "Game5", Game: "Football" },   
  { Id: "Game6", Game: "Golf" },   
  { Id: "Game7", Game: "Hockey" },   
  { Id: "Game8", Game: "Rugby" },   
  { Id: "Game9", Game: "Snooker" },   
  { Id: "Game10", Game: "Tennis" }   
const field = { text: "Game", value: "Game" };   
class MySelect extends React.Component {   
  handleChange = args => {   
    this.props.onChange("valid", args.value);   
  handleBlur = () => {   
    this.props.onBlur("valid", true);   
  render() {   
    return (   
<div style={{ margin: "1rem 0" }}>   
    <div id="multi">   
        <h4> MultiSelect </h4>   
        <DropDownListComponent id="select"   
                               placeholder="Select a game"   
                               popupHeight="220px" />   
    {!!this.props.error && this.props.touched && (   
    <div style={{ color: "red", marginTop: ".5rem" }}>   
Also, we have prepared a sample using our Syncfusion Form Validator to validate the dropdownlist component.   
Sample using Syncfusion Form Validator:  https://stackblitz.com/edit/react-zeq8jx?file=index.js   
Berly B.C 

Live Chat Icon For mobile
Up arrow icon