codecks-io / react-reform

Helps you create powerful themes for pleasant to use forms
http://react-reform.codecks.io
135 stars 7 forks source link

type should not be null, undefined, boolean, or number error #10

Closed th3fallen closed 8 years ago

th3fallen commented 8 years ago

getting warning.js?8a56:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

with the following theme

import React from 'react';

import { Form, registerTheme } from 'react-reform';
import classnames from 'classnames';

import { Text, Textarea, Select, Password, Checkbox } from 'react-reform/opt/inputs';

registerTheme('form', (FormContainer, Fields, { globalErrors }) => (
  <FormContainer className="my-form-class">
    {globalErrors.length ? (
      globalErrors.map((error, i) => <div key={i}>{error}</div>)
    ) : null}
    <Fields>
      {(Field, { label, validations }) => {
        const hasError = validations.some(({ isValid }) => isValid !== true);
        const fieldsetClasses = classnames(
          'form-group',
          {
            'has-danger': hasError,
          }
        );
        return (
          <fieldset className={fieldsetClasses}>
            <label className="form-control-label">{label}</label>
            <Field className="form-control form-control-danger" />
            {hasError ? <span style={{ color: 'red' }}>Error</span> : null}
          </fieldset>
        );
      }}
    </Fields>
    <footer>
      <button>Submit</button>
    </footer>
  </FormContainer>
));

export default {
  Form,
  Text,
  Textarea,
  Select,
  Password,
  Checkbox,
};

and the following component usage

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { inviteManager } from '../actions';
import { getAuthAccount } from 'shared/auth';

import classnames from 'classnames';
import { Form, Text, Textarea } from 'shared/ui/form/form';

import '../styles/InviteManager.scss';

class InviteManagerForm extends Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  static get propTypes() {
    return {
      inviteManager: PropTypes.func.isRequired,
      account: PropTypes.object.isRequired,
    };
  }

  handleSubmit(data) {
    return this.props.inviteManager(data, this.props.account.id);
  }

  render() {
    return (
      <Form theme="form" onSubmit={this.handleSubmit}>
        <Text name="to" label="Email Or Mobile Number" is-required />
      </Form>
    );
  }
}

export default connect(
  // State to send to the Component as props
  (state) => {
    return {
      account: getAuthAccount(state),
    };
  },
  // Dispatch functions to send to the Component as props
  (dispatch) => bindActionCreators({
    inviteManager,
  }, dispatch)
)(InviteManagerForm);

Am i missing something simple?

danielberndt commented 8 years ago

Sorry for taking so absurdly long to reply. :/

When first looking at this issue, I was thinking that it probably was related to react v15 for which I haven't tested the library yet. So I made a mental note to come back to this issue, once I tackle this update. I assumed it would be very soon, but well. Two months have passed by now...

Looking deeper into your code I would assume that some variable returned by import {...} from 'shared/ui/form/form' was null for some reason. And then backtrack the issue from there.

I assume you have resolved this issue by now, so I'm closing this issue. Sorry again for my bad OSS citizenship 😖