I am trying to integrate redux-form (Ver 5.25) into my react.js based web app, but I run into the following problem with the simple sync validation redux-form example:
Uncaught (in promise) Error: Element type is invalid: expected a string
(for built-in components) or a
class/function (for composite components) but got: undefined.
Code:
<Field name="username" component = {username =>
<div>
<input type="text" {...username} placeholder="Username"/>
{username.touched && username.error && <span>{username.error}</span>}
</div>
}/>
In the custom form component (UserRegistrationForm), I have the following code:
export default reduxForm({
form: 'registrationForm',
fields,
validate,
})(UserRegistrationForm);
And in my root reducers, I mounted redux-form reducer to form:
form: formReducer, // redux-form mounted at 'form'
So I was wondering what caused the error with the example code above. I guess the component part in Field is causing it, but I've no idea how to fix it. Any help is appreciated!
Edit:
An appropriate example for using the Field component is here with material-ui, which I am trying to do something similar to
<Field>component declared?import { Field } from 'redux-form';