Uncaught (in promise) Error on dispatching action after loading recaptcha value

52
May 23, 2019, at 05:20 AM

I have a contact us page in my reactjs project and i use redux and store for managing states in my form i add react-google-recaptcha component . i have signed up in google recaptcha and all things are fine. in onChange property of recaptcha component i want to dispatch setCaptcha action to set captcha state in my redux. i use basic form and when I call set captcha action I get "Uncaught (in promise)" error!

my contactUsFormComponent:

import React, {Component} from 'react';
import './ContactUs.css';
import ReCAPTCHA from "react-google-recaptcha";
import {
    setCapcha,
} from "../../../redux/actions";
import {connect} from "react-redux";
import $ from "jquery";
class ContactUsForm extends Component {
    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        this.props.validateCapcha();
        this.props.submitContactUs();
    }
    render() {
        const recaptchaRef = React.createRef();

        function onChange(value) {
            if (value.length > 0)
                this.props.setContactCapcha(value);
        }
        window.recaptchaOptions = {
            lang: 'fa',
        };

        return (
            <>

                    <form onSubmit={this.handleSubmit}>
                   .
                   .
                   .
                        <div className="row">
                            <div className="col-md-3 ">
                                <div className="rc-imageselect">
                                    <ReCAPTCHA
                                        ref={recaptchaRef}
                                        size="normal"
                                        sitekey="my site key here"
                                        onChange={onChange}
                                    />
                                </div>
                            </div>
                            <div className="col-md-3 text-left">
                                <button style={{backgroundColor: "#4870f5"}} type="submit"
                                        className="btn btn-primary register-btn font-13">submit
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </>
        )
    }
}
function mapDispatchToProps(dispatch) {
    return {
   .
   .
   .
        setContactCapcha: capcha => dispatch(setCapcha(capcha)),

    };
}
const mapStateToPtops = (state) => {
    return {
        contactUsState: state.contactUsState
    }
};
export default connect(mapStateToPtops, mapDispatchToProps)(ContactUsForm);

my reducer code:

.
.
.
export const contactUsReducer = (state = contactUsInitialState, action) => {
    switch (action.type) {
        .
        .
        .
        case ACTION_SET_CAPCHA:
            console.log("Captcha valueeeeeeeeeeeeee:", action.capcha);
            return {...state, capcha: action.capcha};
        .
        .
        .
        default:
            return state;
    }
};

my actions code:

.
.
.
export function setCapcha(capcha) {
    return {
        type: ACTION_SET_CAPCHA,
        capcha:capcha
    };
}
.
.
.
READ ALSO
How can I load a new html page and use an element obtained by onclick of a dynamic object?

How can I load a new html page and use an element obtained by onclick of a dynamic object?

so on my indexhtml page i have dynamic objects created by using appendChild and each one of them has an onclick function

66
How to convert a function into a Pipe Function

How to convert a function into a Pipe Function

I have a function that I am trying to convert into a pipe function but I am still unsure after reading the documentation on angular's website

63
How can I reference object data within an object function?

How can I reference object data within an object function?

I'm trying to make a simple tic tac toe game to learn and practice JavaScript OOP and am having some difficulties

78
String passed through Django is undefined in JavaScript but renders fine

String passed through Django is undefined in JavaScript but renders fine

In Django, I am passing an array of strings ['A', 'B', 'C'] to the view and hoping to use these with a JavaScript script I have on the page

47