0

import React from 'react'

import ThankYouModal from '../components/modals/ThankYouModal';

export default class ContactForm extends React.Component {
    constructor(props){
        super(props);
        //inputs
        this.showOrganization= true;
        this.organizationText= ' ';
        this.messageText=' ';

        //state
        this.state = {
            name: '',
            organization: '',
            email: '',
            message: '',
            showThankYouModal: false
        };

        //Binding Functions
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleOrganizationChange = this.handleOrganizationChange.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handleMessageChange = this.handleMessageChange.bind(this);

        //Modal
        this.exitModal = this.exitModal.bind(this);
        this.openModal = this.openModal.bind(this);

    }

    //Modal
    exitModal(){
        this.setState({showThankYouModal: false});
    }
    
    openModal(){
        if(this.state.name&&this.state.email&&this.state.message){
            this.setState({showThankYouModal: true});
        }
    }

    //Form update
    handleNameChange(e){
        this.setState({name: e.target.value});
    }

    handleOrganizationChange(e){
        this.setState({organization: e.target.value});
    }

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

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

    handleSubmit(e){
        e.preventDefault();
        var name = this.state.name.trim();
		var email = this.state.email.trim();
        var message = this.state.message.trim();
        // if (this.props.showOrganization){
        // var organization = this.state.organization.trim();
        // }
        // else{
        //     var organization=' ';
        // }

        console.log(this.state.name);

    }

    render(){
        return(
            <div>
                <form id="messageForm" onSubmit={this.handleSubmit}>
                    <div className="row uniform" >
                            <label className="6u 12u$(xsmall)">
                                <input 
                                style={{marginLeft: "2.5px"}} 
                                type="text" 
                                id="name" 
                                name="name" 
                                placeholder="Name" 
                                value={this.state.name}
                                onChange={this.handleNameChange}
                                required
                                />
                            </label>

                            <label className="6u 12u$(xsmall)">{ this.props.showOrganization &&
                                <input 
                                type="text" 
                                id="organization" 
                                name="organization" 
                                placeholder={this.props.organizationText} 
                                value={this.state.organization} 
                                onChange={this.handleOrganizationChange} 
                                />
                            }
                            </label>
                    </div>
                    <div className="row-uniform">
                            <label class="12u 12u$(xsmall)">
                                <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                placeholder="Email" 
                                value={this.state.email} 
                                onChange={this.handleEmailChange} 
                                required
                                />
                            </label>
                    </div>
                    <div className="row-uniform">
                            <label className="12u$">
                                <textarea 
                                type="message" 
                                id="message" 
                                name="message" 
                                rows="6" 
                                placeholder={this.props.messageText} 
                                value={this.state.message} 
                                onChange={this.handleMessageChange} 
                                />
                            </label>
                            <p id="formError" className="hide" style={{color:"red"}}>invalid </p>
                    </div>
                    <div className="row uniform">
                        <div className="12u$">
                            <ul className="actions">
                                <li >
                                    <input 
                                    /*onClick={this.openModal}*/ 
                                    id="sendMessage" 
                                    type="submit" 
                                    value="Send Message" 
                                    className="special"
                                    />
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
                
                <ThankYouModal
                    showModal={this.state.showThankYouModal}
                    exitModal={this.exitModal}
                />
                
            </div>
        );
    }
}

The error comes when handleSubmit(e) is called. If I try to access anything from this.state like this.state.name it says

TypeError: undefined is not an object (evaluating 'this.state')

Is there nothing being stored in my state variables? I'm certain it's a small silly error that I'm failing to catch, any help will be appreciated.

1
  • you forgot to bind handleSubmit Commented Jun 5, 2018 at 16:55

2 Answers 2

2

You forgot to bind this method as you bind the others.

    constructor(props){
        super(props);
        //inputs
        this.showOrganization= true;
        this.organizationText= ' ';
        this.messageText=' ';

        //state
        this.state = {
            name: '',
            organization: '',
            email: '',
            message: '',
            showThankYouModal: false
        };

        //Binding Functions
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleOrganizationChange = this.handleOrganizationChange.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handleMessageChange = this.handleMessageChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        //Modal
        this.exitModal = this.exitModal.bind(this);
        this.openModal = this.openModal.bind(this);

    }
Sign up to request clarification or add additional context in comments.

Comments

1

Try:

this.handleSubmit.bind(this)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.