Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Issue with Textfield #130

Closed
treeder opened this issue Nov 24, 2015 · 8 comments
Closed

Issue with Textfield #130

treeder opened this issue Nov 24, 2015 · 8 comments

Comments

@treeder
Copy link

treeder commented Nov 24, 2015

I get these errors in my console when using

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). Check the render method of `X`.warning @ warning.js:45ReactElementValidator.createElement @ ReactElementValidator.js:221render @ event-form.js:107ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:587ReactCompositeComponentMixin._renderValidatedComponent @ ReactCompositeComponent.js:607wrapper @ ReactPerf.js:66ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:220wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37mountComponentIntoNode @ ReactMount.js:266Mixin.perform @ Transaction.js:136batchedMountComponentIntoNode @ ReactMount.js:282Mixin.perform @ Transaction.js:136ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62batchedUpdates @ ReactUpdates.js:94ReactMount._renderNewRootComponent @ ReactMount.js:476wrapper @ ReactPerf.js:66ReactMount._renderSubtreeIntoContainer @ ReactMount.js:550ReactMount.render @ ReactMount.js:570wrapper @ ReactPerf.js:66324../components/authentication/facebook-button @ app.js:55s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1
invariant.js:39 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `X`.

Any ideas?

@tleunen
Copy link
Owner

tleunen commented Nov 24, 2015

It's usually because the import path is incorrect and that the "Textfield" you're using is actually undefined.

@tleunen
Copy link
Owner

tleunen commented Dec 1, 2015

Do you still have the issue @treeder ?

@treeder
Copy link
Author

treeder commented Dec 1, 2015

Yes, just tried it again, this is my import:

import { Textfield } from 'react-mdl/lib/Textfield';

This is the render:

render: function() {
    return (
      <div style={{marginBottom: '50px'}}>
             <Textfield/>
      </div>
    );
  }

@tleunen
Copy link
Owner

tleunen commented Dec 1, 2015

The right import should be import Textfield from 'react-mdl/lib/Textfield'; when importing the Textfield directly

@treeder
Copy link
Author

treeder commented Dec 1, 2015

Nice, that works, thanks!

Another quick question, notice it doesn't support name or ref, what's the best way to get all the values on submit?

ie: these, don't do anything:

name="description" ref="description"

but they do on regular fields.

@tleunen
Copy link
Owner

tleunen commented Dec 1, 2015

What I usually do is keeping track of everychange in the state/store and get those values when hitting form onSubmit.
Keeping track of changes in real time allows me to quickly display an error

@treeder
Copy link
Author

treeder commented Dec 1, 2015

Do you have a separate onchange handler for every field then?

@tleunen
Copy link
Owner

tleunen commented Dec 1, 2015

Yep, with a little helper you can usually do that without too much code.
value={this.state.myInput} onChange={saveInState(this, 'myInput')}

@tleunen tleunen closed this as completed Dec 4, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants