0

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

Venugopal
  • 1,888
  • 1
  • 17
  • 30
ThomasThiebaud
  • 11,331
  • 6
  • 54
  • 77

1 Answers1

3

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

Damien Leroux
  • 11,177
  • 7
  • 43
  • 57