Showing error on empty input field ReactJS

Question

I am trying to enable/disable a form button based on if there are any characters in both the of the text input fields, but for some reason the state lengths are rendering an error with my conditional, despite when I log the state it shows up.

Error:

const isEnabled = this.state.subject.length > 0 && this.state.emails.length > 0; 
//Uncaught TypeError: Cannot read property 'length' of undefined

Full Code:

import React from 'react';

export default class EmailAnnotationForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            csrf: '',
            subject: '',
            emails: '',
            comment: ''
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.handleClearForm = this.handleClearForm.bind(this);
        this.input = React.createRef();
    }

    componentDidMount() {
        console.log(this.state.subject.length) // renders correct value => 0
        this.setState({subject: this.props.title });
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
    }

    handleClearForm() {
        this.setState({
            csrf: '',
            subject: '',
            emails: '',
            comment: ''
        })
    }

    handleFormSubmit(event) {
        var emailSubject;  
        {
            this.state.subject ? emailSubject = this.state.subject : emailSubject = this.props.title
        }; //

        const body = {
            subject: emailSubject,
            emails: this.state.emails,
            comment: this.state.comment
        };

        event.preventDefault();
        var route = `${API_ROOT}` + '/api/annotation/' + this.props.annotationId + '/share/email';
        fetch(route,
            {
                method: 'POST', 
                body: JSON.stringify(body),
                compress: false,
                headers: { 
                    'X-CSRF-Token': this.props.csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => {
                return res.json();
            })  
            .then(data => {
                this.handleClearForm();
                this.props.shareFlashMessage('success');
                this.setState({'flash': 'success'});
                this.props.closeShareModal(false);
            }) 
            .catch(err => {
                console.log(err);
                this.props.shareFlashMessage('error');
                this.setState({'flash': 'error'});
            });
    }


    render() {
        var emailSubject;  
        {
            this.state.subject 
                ? 
            emailSubject = this.state.subject 
                : 
            emailSubject = this.props.title
        };

        console.log(this.state) // csrf: '', subject: undefined, emails: '', comment: ''
        console.log(this.state.subject) // renders undefined

        const isEnabled = this.state.subject.length > 0 && this.state.emails.length > 0; //Uncaught TypeError: Cannot read property 'length' of undefined

        return (
            <div className="annotation-footer__share-form-email">
                <form action={"/api/annotation/" + this.props.annotationId + "/share/email"} method="post" onSubmit={this.handleFormSubmit} name="annotationEmailShare" id="share-email-form">
                    <div className="input-group annotation-footer__share-form-email-inputs">
                        <p><b>Subject:</b></p>
                        <input type="text" name="subject" className="form-control" defaultValue={this.props.title} onChange={this.handleInputChange}/><br />
                    </div>
                    <div className="input-group annotation-footer__share-form-email-inputs">
                        <p><b>Emails (Comma separate each email address):</b></p>
                        <input type="text" name="emails" className="form-control" onChange={this.handleInputChange}/><br />
                    </div>
                    <div className="input-group annotation-footer__share-form-email-inputs">
                        <p><b>Additional Comment (Optional):</b></p>
                        <textarea name="comment" rows="4" className="form-control" onChange={this.handleInputChange}></textarea><br />
                    </div>
                    <button type="submit" disabled={!isEnabled}>Send Email</button>
                </form>
            </div>
        )
    }
}

Mayank Shukla · Accepted Answer · 2019-04-13 16:03:27Z

1

It seems this.props.title is undefined.

To solve the issue, put the check on this.props.title value, and update the state only if it has a valid value. Like this:

componentDidMount() {
  if(this.props.title)
    this.setState({ subject: this.props.title });
}

Suggestion:

Instead of updating subject with props value in didMount method, do it in constructor itself, Like this:

this.state = {
  csrf: '',
  subject: props.title || '',
  emails: '',
  comment: ''
}

answered Apr 13, 2019 at 16:03

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

1 Comment

cphill Over a year ago

Thanks for the suggestion and answer!

Collectives™ on Stack Overflow

Showing error on empty input field ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related