This is the error: SCREENSHOT It is supposed to show: this

I am using arrow function with asyncAwait. VSCode is not throwing any error in the console. I am having a hard time debugging this. I have just started redux and I am not sure if I am missing anything here or not using something correctly. I have tried going through docs but it seems I am using the arrow function correctly as far as that is concerned. I might be doing it all wrong but cannot find what is wrong here.

This is my register.js file and I cannot figure out why it says props.setAlert is not a function:

import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';

import { connect } from 'react-redux';
import { setAlert } from '../../actions/alert';

export const Register = (props) => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        password: '',
        password2: '',
    });
    const { name, email, password, password2 } = formData;
    const onChange = (e) =>
        setFormData({
            ...formData,
            [e.target.name]: e.target.value,
        });
    const onSubmit = async (e) => {
        e.preventDefault();
        if (password !== password2) {
            props.setAlert('Passwords do not match', 'danger');
        } else {
            console.log('SUCCESS');
        }
    };
    return (
        <Fragment>
            <h1 className='large text-primary'>Sign Up</h1>
            <p className='lead'>
                <i className='fas fa-user'></i> Create Your Account
            </p>
            <form className='form' onSubmit={(e) => onSubmit(e)}>
                <div className='form-group'>
                    <input
                        type='text'
                        placeholder='Name'
                        name='name'
                        value={name}
                        onChange={(e) => onChange(e)}
                        required
                    />
                </div>
                <div className='form-group'>
                    <input
                        type='email'
                        placeholder='Email Address'
                        name='email'
                        value={email}
                        onChange={(e) => onChange(e)}
                        required
                    />
                    <small className='form-text'>
                        This site uses Gravatar so if you want a profile image,
                        use a Gravatar email
                    </small>
                </div>
                <div className='form-group'>
                    <input
                        type='password'
                        placeholder='Password'
                        name='password'
                        minLength='6'
                        value={password}
                        onChange={(e) => onChange(e)}
                        required
                    />
                </div>
                <div className='form-group'>
                    <input
                        type='password'
                        placeholder='Confirm Password'
                        name='password2'
                        minLength='6'
                        value={password2}
                        onChange={(e) => onChange(e)}
                        required
                    />
                </div>
                <input
                    type='submit'
                    className='btn btn-primary'
                    value='Register'
                />
            </form>
            <p className='my-1'>
                Already have an account? <Link to='/login'>Sign In</Link>
            </p>
        </Fragment>
    );
};

export default connect(null, { setAlert })(Register);

This is the alert.js action file:

import { v4 as uuidv4 } from 'uuid';
import { SET_ALERT, REMOVE_ALERT } from './types';

export const setAlert = (msg, alertType) => (dispatch) => {
    const id = uuidv4();
    dispatch({
        type: SET_ALERT,
        payload: { msg, alertType, id },
    });
};

In my types.js I have only exported two alert types:

export const SET_ALERT = 'SET_ALERT';
export const REMOVE_ALERT = 'REMOVE_ALERT';

CodePudding user response：

You have exported both the initial component and the connected one. And you have probably imported the initial component because the setAlert prop is not available (not connected).

You need to change your import from "named":

import { Register } from './components';

to "default":

import Register from './components';