redux form Element type is invalid: expected a string (for built-in components)

Question

• In my stepper code Iam trying to include the radio button.
• When I include the radio button I am getting the below error.
• I looked into this example https://redux-form.com/6.0.0-alpha.6/examples/simple/ and then imeplemented
• but still I am faccing errors.
• Can you tell me how to fix it, so that in future I will fix it myself.
• Providing my sandbox and code snippet below.

https://codesandbox.io/s/0prxxxvy0n

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

const AsyncValidationForm = props => {
  console.log("AsyncValidationForm ---->");

  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      <Field name="sex" type="radio" value="male" />

      <div>
        <button type="submit" disabled={submitting}>
          Sign Up
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

Answer 1

You simply need to add the renderField component to your radio field:

 <Field component={renderField} name="sex" type="radio" value="male" />

Why does it solve your issue? What you are using here, is the Field component of redux-form. (See your import import { Field, reduxForm } from "redux-form"; ) When you don't know how a component that you are integrating is working, there is always hope for a good documentation. In case of redux-form we are lucky: there actually is one that as well describes their Field component.

What we can get there is the following:

1. The name prop is required. It is a string path, in dot-and-bracket notation, corresponding to a value in the form values. It may be as simple as 'firstName' or as complicated as contact.billing.address[2].phones[1].areaCode.

2. The component prop is required. It may be a Component, a stateless function, or a factory, like those provided under React.DOM. See Usage section below. To learn about the props that will provided to whatever your component is, see the Props section below.

3. All other props will be passed along to the element generated by the component prop.

The second paragraph explains why your approach did not work out: the component prop is required. :)

Source: https://redux-form.com/6.0.0-alpha.6/docs/api/field.md/

Hope it helps.