PropType declared function, value is undefined - reactjs

Question

I'm trying to declare my function from a Action to the PropType but it always display a "...value is undefined". can someone tell where's my error?
I'v tried repack my react folder which is "client" using "npx" and also every related solution.
action/auth.js
import {
LOGIN_SUCCESS,
LOGIN_ERROR,
USER_LOADING,
USER_LOADED,
REGISTER_ERROR,
REGISTER_SUCCESS
} from "./types";
import axios from "axios";
export const getConfig = getState => {
let config = {
headers: { "Content-Type": "application/json" }
};
const token = getState().auth.token;
if (token) {
config.headers["x-auth-token"] = `Bearer ${token}`;
}
return config;
};
export const registerUser = userObj => (dispatch, getState) => {
axios
.post("/auth/register", JSON.stringify(userObj), getConfig(getState))
.then(result => {
console.log(result);
dispatch({
type: LOGIN_SUCCESS,
payload: result.data
});
})
.catch(error => {
console.log(error);
dispatch({
type: LOGIN_ERROR
});
});
};
component/main/RegisterForm
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Alert } from "reactstrap";
import { registerUser } from "../../actions/auth";
import { connect } from "react-redux";
import PropTypes from "prop-types";
export class RegisterForm extends Component {
constructor(props) {
super(props);
document.title = "OnlineChat - Register";
}
state = {
firstname: "",
lastname: "",
email: "",
password: "",
password1: "",
error: null,
visible: false
};
static propTypes = {
registerUser: PropTypes.func.isRequired
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
onDismiss = e => {
this.setState({ visible: false, error: null });
};
onSubmit = e => {
e.preventDefault();
const { firstname, lastname, email, password, password1 } = this.state;
const userObj = this.state;
console.log(firstname, lastname, email, password, password1);
if (!firstname || !lastname || !email || !password || !password1) {
return this.setState({ error: "Please fill all fields.", visible: true });
}
if (password !== password1) {
return this.setState({ error: "Password must match.", visible: true });
}
this.props.registerUser(userObj);
this.setState({
firstname: "",
lastname: "",
email: "",
password: "",
password1: ""
});
};
render() {
const {
firstname,
lastname,
email,
password,
password1,
error,
visible
} = this.state;
return (
<div className="d-flex align-items-center" style={{ height: "100vh" }}>
<div className="container">
<div className="row">
<div className="col-12 col-sm-12 col-md-6 col-lg-6 offset-md-3">
<Alert color="danger" isOpen={visible} toggle={this.onDismiss}>
<strong>Alert! </strong>
{error}
</Alert>
<div className="card">
<div className="card-body">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="">First Name</label>
<input
type="text"
autoComplete="off"
className="form-control"
onChange={this.onChange}
value={firstname}
name="firstname"
/>
</div>
<div className="form-group">
<label htmlFor="">Last Name</label>
<input
type="text"
autoComplete="off"
className="form-control"
onChange={this.onChange}
value={lastname}
name="lastname"
/>
</div>
<div className="form-group">
<label htmlFor="">Email</label>
<input
type="email"
autoComplete="off"
className="form-control"
onChange={this.onChange}
value={email}
name="email"
/>
</div>
<div className="form-group">
<label htmlFor="">Password</label>
<input
type="password"
autoComplete="off"
className="form-control"
onChange={this.onChange}
value={password}
name="password"
/>
</div>
<div className="form-group">
<label htmlFor="">Re-type Password</label>
<input
type="password"
autoComplete="off"
className="form-control"
onChange={this.onChange}
value={password1}
name="password1"
/>
</div>
<button
className="btn btn-block btn-outline-success"
type="submit"
>
Register
</button>
</form>
<div className="d-block justify-content-left pt-2">
<Link to="/" className="cLink">
Have an account ?
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(
mapStateToProps,
{ registerUser }
)(RegisterForm);
reducer/authReducer
import {
LOGIN_ERROR,
LOGIN_SUCCESS,
REGISTER_ERROR,
REGISTER_SUCCESS,
USER_LOADING
} from "../actions/types";
const initialState = {
token: localStorage.getItem("token"),
isAuthenticated: null,
isLoading: false,
user: null
};
export default (state = initialState, action) => {
switch (action.type) {
case USER_LOADING:
return {
...state,
isLoading: true
};
case LOGIN_SUCCESS:
case REGISTER_SUCCESS:
localStorage.setItem("token", action.payload.token);
return {
...state,
...action.payload,
isAuthenticated: true,
isLoading: false
};
case LOGIN_ERROR:
case REGISTER_ERROR:
return {
...state,
token: null,
isAuthenticated: null,
isLoading: false,
user: null
};
default:
return state;
}
};
Here's the error message keeps prompting in my console.
Error Message

Answer 1

Delete export from class, make it class RegisterForm extends Component { not export class RegisterForm extends Component { since you are exporting the module at the bottom saying export default connect