this.state null in reactjs component

Question

i am just trying first something simple like only printing the this.state.validForm in the handleSubmit function, but i cant seem to access this.state.validForm. First i tried directly then with this function, but to no avail. I am new to react.

import React, { Component } from 'react';
import TextInput from './TextInput';

class RequestForm extends Component {
    constructor(props) {
        super(props);
        this.state = {validForm : "false"};
        this.getInfoForm = this.getInfoForm.bind(this);
    }

    getInfoForm() {
        return this.state.validForm;
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log('submit values are');
        console.log(event.target.src.value);
        console.log(event.target.email.value);
        console.log(this.state.validForm);
        console.log(this.getInfoForm());
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <TextInput
                    uniqueName="email"
                    name="email"      
                    text="Email Address"
                    required={true}     
                    minCharacters={6}
                    validate="email" 
                    errorMessage="Email is invalid"
                    emptyMessage="Email is required"
                />

                <TextInput 
                    text="User"
                    name="User src"
                    required={true}
                    minCharacters={3}
                    validate="notEmpty"
                    errorMessage="Name is invalid"
                    emptyMessage="Name is required"
                />

                <button type="submit">Submit</button>
            </form>
        );
    }
}

export default RequestForm;

Possible duplicate of [React ref and setState not working with ES6](http://stackoverflow.com/questions/29577977/react-ref-and-setstate-not-working-with-es6) — Felix Kling, Mar 18 '16 at 17:34
Also consider pre-binding your `handleSubmit` in the same way you did with `getInfoForm`. — ffxsam, Mar 18 '16 at 19:32

ZekeDroid · Accepted Answer · 2016-03-18T18:01:19.517

6

The issue is with your render method. Your onSubmit event has its own context so when you do this.handleSubmit, you're going to be passing the wrong context to handleSubmit. Simply bind this and you'll be set!

<form onSubmit={this.handleSubmit.bind(this)}>

Or with the proposed bind operator:

<form onSubmit={::this.handleSubmit}>

edited Mar 18 '16 at 18:01

answered Mar 18 '16 at 17:37

ZekeDroid

7,089
5
33
59

*"if you have ES7 features enabled"* The bind operator is not a ES7 feature. It's still only a proposal. – Felix Kling Mar 18 '16 at 17:45

this.state null in reactjs component

1 Answers1