I am trying to use a library called redux-form in a Typescript based project. When I take their "simple form" example code and implement it I get an error:
error TS2604: JSX element type 'SimpleForm' does not have any construct or call signatures.
What am I doing wrong? I have the definition file for this lib installed so either I have coded it incorrectly or the definition file is incorrect.
In my form component (stripped the code way down to make it as lean as I can):
import * as React from 'react';
import {reduxForm} from 'redux-form';
export const fields = ['firstName'];
class SimpleForm extends React.Component<any, any> {
static propTypes = {
fields: React.PropTypes.object.isRequired,
};
render() {
const {
fields: {firstName}
} = this.props;
return (<form>
<div>
<label>First Name</label>
<div>
<input type="text" placeholder="First Name" {...firstName}/>
</div>
</div>
<div>
<button>
Submit
</button>
</div>
</form>
);
}
}
export default reduxForm({
form: 'simple',
fields
})(SimpleForm);
and I consume it here (which results in the above error):
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as SimpleForm from '../components/GuestForm';
export default class Main extends React.Component<any, any> {
render() {
return (
<div className='mainApp'>
<SimpleForm />
</div>
);
}
}
I think your problem is in how you import default exported class:
export default reduxForm(...
If you have it declared as above then you should import it like this:
import SimpleForm from '../components/GuestForm'
Otherwise you can remove 'default' and import it like this:
import {SimpleForm} from '../components/GuestForm'
Hope this helps.