Stefen Suhat Stefen Suhat - 1 month ago 11
React JSX Question

React, React Redux, Redux Form type is invalid

I have this problem and can't solve it.

Here is my code:

import React from 'react';
import {withRouter} from 'react-router-dom';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';

import {RenderField} from 'modules/shared/components/RenderField';


class Register extends React.Component {
handleFormSubmit(data){
console.log(data);
}
render() {
const {handleSubmit} = this.props;
return (
<div className="form-popup">
<div className="form-popup-content">
<h4 className="popup-title">Daftar Baru</h4>

<hr className="line-separator"/>

<form id="register-form" name="registerForm" method="POST" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

<Field name="name" type="text" component={RenderField} label="Name"/>

<button type="submit" id="register-button" className="button mid dark ladda-button"
data-style="expand-right">
Register
</button>
</form>
</div>
</div>
);
}
}

function mapStateToProps(state){
return state;
}

Register = reduxForm({
form: 'registerForm',
})(Register);
export default withRouter(connect(mapStateToProps, null))(Register);


Compile and I got this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.


Any solution?

QoP QoP
Answer

(Register) should be after connect().

Change

export default withRouter(connect(mapStateToProps, null))(Register);

to

export default withRouter(connect(mapStateToProps, null)(Register));