ThomasThiebaud ThomasThiebaud - 1 month ago 14
React JSX Question

Element type is invalid (got: undefined) for react-redux component

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


Answer

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

Comments