Seems like I am not allowed to import FormInput from react-native-elements.
I got this error:
Invariant Violation: 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.
Check the render method of `LoginForm`.
My code is below:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { FormInput, Button } from 'react-native-elements'
export default class LoginForm extends Component {
render() {
return (
<View>
<FormInput value="" placeholder="Enter email"></FormInput>
<FormInput valye="" placeholder="Enter password"></FormInput>
<Button title="Login" backgroundColor="red"></Button>
</View>
)
}
}
I don't see what I am doing differently from the official doc. I know FormInput is the issue because if I comment out the two lines then it renders fine.
FormInput only exists in 0.19.1 version of React-Native-Elements.
Make sure you have properly installed the version 0.19.1 using the code below in the terminal,
npm -i react-native-elements#0.19.1
Here is more information for 0.19.1 elements,
0.19.1 Input
However, you can also keep using the 1.0.0 version of react-native-elements.
For 1.0.0, the input component is a little different.
Here is the link about input elements in React-Native,
1.0.0 Input
FormInput has been Changed to Input from v1.0.0-beta onwards
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { Input, Button } from 'react-native-elements'
export default class LoginForm extends Component {
render() {
return (
<View>
<Input value="" placeholder="Enter email"></Input>
<Input valye="" placeholder="Enter password"></Input>
<Button title="Login" backgroundColor="red"></Button>
</View>
)
}
}
this should work.
More info here
Related
I have a draggable component in my project, but it throws an error whenever I start the dev server -
react-jsx-dev-runtime.development.js:87 Warning: React.jsx: 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.
Check your code at draggable.js:9.
Here is my code for draggable.js:
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { Draggable } from "react-draggable";
console.log(Draggable); //undefined
export class Board extends Component {
render() {
return (
<div>
<Draggable position={{ x: 0, y: 0 }} handle=".handle">
<div>
<div className="handle">Drag me</div>
<div>I will move with the handle</div>
</div>
</Draggable>
</div>
);
}
}
Using the console.log statement I have found that the problem is the Draggable component on line 9 is undefined. But after reading the documentation for react-draggable I can't figure out why that is.
I ran npm install react-draggable and checked package.json. The project has react-draggable version 4.4.5 installed
The solution was to change the import statement
import { Draggable } from "react-draggable";
to
import Draggable from "react-draggable";
Note that DraggableCore import statement goes in curly brackets, that was the cause of my confusion
I'm getting an error whenever I try to render a Field from Redux-form-material-ui. This is my form code:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { TextField, DatePicker, SelectField } from 'redux-form-material-ui';
class InputForm extends Component {
render() {
return(
<form>
<div>
<Field name="eventDate" component={DatePicker} format={null} hintText="What day is the event?"/>
</div>
</form>
)
}
}
InputForm = reduxForm({
form: 'contact'
})(InputForm);
export default InputForm;
The error that I'm getting is this one:
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.
Check the render method of ConnectedField.
I know it has to do with the component={ DatePicker } assigned on the Field element because if I change it to TextFIeld it renders okey.
I found out that DatePicker hasnt been implemented(do not know why) on the new release of redux-form-material-ui#next. So this has been solved.
I'm trying to create a component for redux-form. Here is my component
import React, { PropTypes } from 'react'
import Input from 'react-toolbox'
export const TextField = ({ input, meta: { touched, error }, ...custom }) => (
<Input
error={touched && error}
{...input}
{...custom}
/>
)
TextField.propTypes = {
input: PropTypes.object,
meta: PropTypes.object
}
export default TextField
I also create an index.js file to easily import it
import TextField from './TextField'
export default TextField
Then I use it like this
import TextField from 'components/TextField'
import { Field } from 'redux-form'
<form onSubmit={props.handleSubmit(props.loginUser)}>
<Field type='email' label='Email' name='email' component={TextField} required />
</form>
But I get this error
Error: 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 TextField.
I check again an again
the redux form doc
other related topic on SO like this one or this one
Try to change:
import Input from 'react-toolbox'
to:
import Input from 'react-toolbox/lib/input';
or
import {Input} from 'react-toolbox';
Both should work
I think that in your case Input is undefined imported like that
I have tried several times to use the <Form> and <FormControl> components. Everytime I use I keep getting same erros:
"warning.js?8a56:45 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 App."
"Uncaught 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 App."
Even with this basic example:
import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';
export default class App extends Component {
render() {
return (
<form>
<FormGroup controlId="formControlsText">
<ControlLabel>Text</ControlLabel>
<FormControl type="text" placeholder="Enter text" />
</FormGroup>
<Button type="submit">
Submit
</Button>
</form>
);
}
}
Any ideas?
Update the npm-package those components are new in react-bootstrap.
Import your React-Bootstrap components like this:
import FormControl from 'react-bootstrap/lib/FormControl';
That helped me to get rid of the same error when using react-bootstrap 0.31.
I had a somewhat related issue and discovered they removed ControlLabel replacing it with FormLabel in more recent versions.
Change
import {FormControl, FormGroup, ControlLabel, etc... } from 'react-bootstrap';
To
import {FormControl, FormGroup, FormLabel, etc... } from 'react-bootstrap';
My class is as follows:
import React from 'react';
import Input from 'react-bootstrap';
export default class FormWidget1 extends React.Component {
render() {
if (!this.props.fields) {
console.log('no fields passed');
}
else {
console.log(this.props.fields.length);
console.log(this.props.fields);
}
var formFieldList = this.props.fields.map(function(field) {
console.log("iterating");
return (
<Input type="text" placeholder="testing" label="label" />
);
});
return (
<div>
<form action="">
{formFieldList}
</form>
</div>
);
}
}
If I replace <Input /> with <input /> then there's no error.
The stacktrace only shows my app.jsx which is not useful.
What is wrong?
You need to de-structure your import of the Input jsx component.
import {Input} from 'react-bootstrap';
What this does is render to var Input = require('react-bootstrap').Input; Whereas what you previously had would render to var Input = require('react-bootstrap');
It does mention this in the documentation for React Bootstrap here:
https://react-bootstrap.github.io/getting-started.html#es6
Edit: A good hint is that the error you're getting from React is a typical error when you're trying to render as a component, something which is actually not a react component. So basically you were trying to render the object that react bootstrap returns containing all components, rather than the actual input component you wanted.