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.
Related
I am trying to add a search bar within a navbar using react-bulma-components, 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. 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 TopNav.
I don't get the error when I exclude the Navbar.Item containing a Field element. The following is my code:
<Navbar>
<Navbar.Brand>
<Navbar.Item renderAs="a" href="/">
The Nomad
</Navbar.Item>
<Navbar.Burger>
</Navbar.Burger>
</Navbar.Brand>
<Navbar.Item>
<Field>
<Control>
<Input placeholder="Search" />
</Control>
</Field>
</Navbar.Item>
</Navbar>
Any help is much appreciated!
I managed to figure this out on my own. It turns out that Field, Control and Input are properties of the Form component. I had the following in my import statements (incorrect version):
import React from 'react';
import { Navbar } from 'react-bulma-components';
import { Field, Control, Input } from 'react-bulma-components';
What I should have had was this:
import React from 'react';
import { Navbar } from 'react-bulma-components';
import { Form } from 'react-bulma-components';
const { Field, Control, Input } = Form;
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
I'm trying to use semantic UI for React with its modal.
Dropdown is ok but modal can't load :
import {DropDown} from "semantic-ui-react";
import {Modal} from "semantic-ui-react";
export default class Builder extends Component {
render(){
return(
<DropDown/>
<Modal/>
)
}
}
The console is returning this error :
app.js:547 Warning: React.createElement: 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.
Check the render method of `Portal`.
I have already tried like this :
import Modal from "semantic-ui-react";
And as I saw, Modal folder is at the same level as the Dropdown in my packages.
Any help would be welcome!
Thanks
I think the solution to your problem is either of the following:
You forgot to import import React, { Component } from "react";
The structure of your code. You must wrap both JSX elements in an enclosing tag as they are adjacent. It should be like this:
<div>
<Dropdown/>
<Modal/>
</div>
You don't have to separate import two components as they are both in semantic-ui-react library.
Hope this helps
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';