CODEWITHSUNDEEP
reactjsreduxredux-form
Bagus Trihatmaja
Bagus Trihatmaja

Reputation: 865

Invariant Violation: Element type is invalid: expected a string or a class/function but got: undefined

I am trying to implement pure function for my login form and I am using redux-form.

And I got this error in my unit test:

Invariant Violation: Element type is invalid: expected a string  or a class/function but got: undefined.

Here is my component that I want to test:

import { Username } from './presentation/LoginPage.js';
export class LoginPage extends React.Component {
  render() {
    const { error, handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Username</label>
          <Field 
            name="username" 
            component={username =>
              <Username username />
          } />
        </div>
      </form>
    );
  }
}

LoginPage.propTypes = {
};

export default reduxForm({
  form: 'login',  // a unique identifier for this form
})(LoginPage);

And here is my pure component:

export const Username = (props) => {
  const { username } = props;
  return (
    <div>
      <input type="text" {...username} placeholder="Username" />
      {username.touched && username.error && <span>{username.error}</span>}
    </div>);
};

When I play it in the browser I got reduce is not defined. It works fine when I remove the <Field />

Is there something obvious did I miss?

Upvotes: 0

Views: 204

Answers (2)

just-boris
just-boris

Reputation: 9766

You have strange render with Username component

<Username username />

It is short syntax for the following

<Username username={true} />

According to rest of the code, here should be

<Username username={username} />

Upvotes: 2

Bagus Trihatmaja
Bagus Trihatmaja

Reputation: 865

ah I think I am mixing the syntax for Field between v6 and 5. Field is available for redux-form v6.

Upvotes: 1

Related Questions