Redux state shows data, but props returns null inside the state of component

import React, {Component} from "react";
import PropTypes from "prop-types";
import * as actionCreators from '../../actions/authAction';

import {loadUser, setPass , register} from "../../actions/authAction";
import {connect} from "react-redux";
import { bindActionCreators } from "redux";
import {clearError} from "../../actions/errorAction";
import {toast} from "react-toastify";
import store from "../../store";


class RegisterFinal extends Component {

    componentDidMount() {
        store.dispatch(loadUser());

    }
    componentDidUpdate(nextProps) {
        if (nextProps.user !== this.props.user) {
            this.setState({ email: this.props.user});
        }
    }

    state = {
        userName: "",
        password: "",
        passwordConfirm: "",
        email: "",
        msg: null
    }

    static propTypes = {
        isAuthenticated: PropTypes.bool,
        setPass: PropTypes.bool,
        register: PropTypes.func.isRequired,
        auth: PropTypes.object.isRequired,
        user : PropTypes.object.isRequired,
    };

    onSubmit = (e) => {
        e.preventDefault();
        const {password, userName, email} = this.state
        const setPass = {
            password, userName, email
        }
        this.props.setPass(setPass);
        const {passwordConfirm} = e.target;
        const errors = {};
        if (password.value !== passwordConfirm.value) {
            errors.passwordMismatch = "Entered passwords do not match.";
            console.log(errors)
        }
    }
    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    render() {
        return (
            <div className={"container"}>
                <div className={"row row-of-final-register justify-content-center"}>
                    <div className={"mt-5 register-teacher-inputs-box final-register-teacher-inputs-box"}>
                        <div className={"final-register-wrapper"}>
                          
                        <form className={"mt-5"} onSubmit={this.onSubmit}>
                            <div className={"row"}>
                                <div className={"col-12"}>
                                    <label
                                        htmlFor={"userName"} className={"text-right username-label"}>
                                        <span>*</span>
                                    </label>
                                    <input type="text" className="form-control w-100" placeholder={"Username"}
                                           name={"userName"}
                                           autoComplete="true"
                                           value={this.userName}
                                           onChange={this.onChange}
                                           onFocus={(e) => e.target.placeholder = ""}
                                    />
                                </div>
                            </div>
                            <div className={"row"}>
                                <div className={"col-12 col-lg-6 mt-3"}>
                                    <label
                                        htmlFor={"password"} className={" text-right"}>
                                        <span>*</span>
                                    </label>
                                    <input type="password" className="form-control " placeholder={"Password"}
                                           name={"password"}
                                           value={this.password}
                                           onChange={this.onChange}
                                  
                                           onFocus={(e) => e.target.placeholder = ""}
                                    />
                                </div>
                
                            </div>
                            <div className={"row mt-3 pt-2"}>
                                <div className={"col-12 final-register-wrapper final-register-btn"}>
                                    <button type={"submit"} className={"final-register-btn"}>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}


function mapStateToProps (state , ownProperties)  {
    console.log(state.auth.user)
    return {
        setPass: state.auth.setPass,
        isAuthenticated: state.auth.isAuthenticated,
        error: state.error,
        auth: state.auth,
        user : state.auth.user,



    }

};
function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps

)(RegisterFinal);

I have this :


But when I try to access email get Error that cannot read property ‘email’ of undefined

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.