CODEWITHSUNDEEP
javascriptnode.jsreactjs
Cameron Sima
Cameron Sima

Reputation: 5385

Uncaught TypeError: Cannot read property 'state' of null in react

I am trying to implement a simple signup page in react. However, when I try to submit the form, I get signup.js:53 Uncaught TypeError: Cannot read property 'state' of null

Apparently react is not properly setting the state. Here is the code from the Signup component:

import React, { Component } from 'react';

export default class Signup extends Component {

  constructor(props) {
    super(props)
    this.state = {
        username: "",
        password1: "",
        password2: "",
        error: ""
      }
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({[e.target.name]: e.target.value})
  }

  handleSubmit(e) {
    e.preventDefault()
    console.log(e)
    var username = this.state.username.trim()
    var password1 = this.state.password1.trim()
    var password2 = this.state.password2.trim()

    if (!username || !password1 || !password2) 
      return
    else if (password2 !== password1)
      this.setState({
        error: "Passwords didn't match",
        username: "",
        password1: "",
        password2: ""
        })
  }
  render() {
    return (
      <div>
        <form className="signupForm" onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="username"
            placeholder="Username"
            value={this.state.username}
            onChange={this.onChange} />
          <input
            type="text"
            name="password1"
            placeholder="Password"
            value={this.state.password1}
            onChange={this.onChange} />
          <input
            type="text"
            name="password2"
            placeholder="Password again"
            value={this.state.password2}
            onChange={this.onChange} />
          <input type="submit" value="Post" />
        </form>
        <div value={this.state.error}></div>
      </div>
      )
  }
}

Upvotes: 19

Views: 31957

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

You should set this for handleSubmit as you did for onChange

constructor(props) {
  super(props)
  this.state = {
    username: "",
    password1: "",
    password2: "",
    error: ""
  }
  this.onChange = this.onChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

Upvotes: 42

Related Questions