React Contact Form

[Wildfires]

Hi all,

I’m not sure if I’m just being thick here.

I’m trying to build a MERN contact form and I’m stuck and sending the form to the back end. There’s no errors or warnings in the code, however, when I click the send button, the website crashes.

The problem seems to be in the fetch portion then I try to put the component’s state into the request’s body:

    onSubmitHandle(e){
        e.preventDefault();

        axios({
            method: "POST",
            url: "http://localhost:3001/send",
            data: this.state
        }).then((res) => {
            if (res.data.status === "success"){
                alert("Message sent");
                this.resetForm()
            } else if (res.data.status === "fail") {
                alert("Message failed to send")
            }
        })
    }

Again, this portion of the code doesn’t have any errors and the website compiles perfectly fine. However, the I try to actually send something, I get this:

I do not see why I would get ‘this is undefined’ in a React website where statement like ‘this.state’ is used all the time.

Any ideas, anyone?

Thanks

[DanCouper]

Need to see the rest of the code. As the error says, this is undefined which means you’re trying to access a value that doesn’t exist

[Wildfires]

Sure,
Here’s the full code of the component in question:

import React from "react";
import axios from "axios";

class Contact extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            email: "",
            message: ""
        }

        this.onNameChange = this.onNameChange.bind(this)
        this.onEmailChange = this.onEmailChange.bind(this)
        this.onMessageChange = this.onMessageChange.bind(this)
    }

    onNameChange(e){
        this.setState({
            name: e.target.value
        })
    }

    onEmailChange(e){
        this.setState({
            email: e.target.value
        })
    }

    onMessageChange(e){
        this.setState({
            message: e.target.value
        })
    }

    resetForm(){
        this.setState({
            name: '',
            email: '',
            message: ''
        })
    }

    onSubmitHandle(e){
        e.preventDefault();

        const {name, email, message} = this.state

        axios({
            method: "POST",
            url: "http://localhost:3001/send",
            data: {name, email, message}
        }).then((res) => {
            if (res.data.status === "success"){
                alert("Message sent");
                this.resetForm()
            } else if (res.data.status === "fail") {
                alert("Message failed to send")
            }
        })
    }

    render() {
        return (
            <div className={"contact section"} id={"contact"}>
                <form
                    id={"contact-form"}
                    method={"POST"}
                    encType={"multipart/form-data"}
                    onSubmit={this.onSubmitHandle}>
                    <h2>Drop me a message</h2>
                    <input
                        name={"name"}
                        type={"text"}
                        className={"form-control"}
                        placeholder={"Name"}
                        value={this.state.name}
                        onChange={this.onNameChange}
                        required={"true"}/>
                    <br/>
                    <input
                        name={"email"}
                        type={"email"}
                        className={"form-control"}
                        placeholder={"Email"}
                        value={this.state.email}
                        onChange={this.onEmailChange}
                        required={"true"}/>
                    <br/>
                    <textarea
                        name={"message"}
                        className={"form-control"}
                        id={"contact-message"}
                        placeholder={"Message"}
                        value={this.state.message}
                        onChange={this.onMessageChange}
                        required={"true"}/>
                    <br/>
                    <input
                        type="submit"
                        className={"form-control submit"}
                        id={"contact-btn-submit"}
                        value={"Send"}/>
                </form>
            </div>
        )
    }
}

export default Contact;

[dchandra]

bind resetForm and try, also add catch block to the axios

[Wildfires]

Although, binding the resetForm() and the try catch block are good practices, they didn’t resolve the problem.

But they gave me an idea. It turns out, I’m just dumb and forgot to bind the onSubmitHandle() function.
This resolved my current problem.

Now, I’m getting promise rejection error caused simply by the fact that I didn’t code up my back end properly yet. I can sort this out.

Thank you!