We help IT Professionals succeed at work.

What is undefined in my react components?

I'm trying to follow/understand some react concepts and I have a class component that has another class component and I'm having some trouble figuring out a bug with my setState. I'm including the two components below as well as the error I'm getting. In short, I don't know/understand what property is undefined.

MY HOME COMPONENT
import React from 'react';
import Login from '../../containers/Login/Login';


class Home extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      confirmationNumber: { text: '', isValid: true, error: '' },
    }
  }

  handleInputChange(event) {

    this.setState({
        [event.target.name]: {
            text: event.target.value,
            isValid: false,
            error: 'an error message'
        }
    });
  }

  render (){
    return (
      <div>
        {/* <p>You clicked {count} times</p> */}
        <button>
          Click me
        </button>
          <Login handleInputChange={this.handleInputChange}/>
      </div>
      );
  }
}

export default Home;

Open in new window


MY LOGIN COMPONENT
import React, { useState, useEffect } from 'react';
import './Login.css';
import CstmTextBox from '../../components/CstmTextBox/CstmTextBox';

class Login extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            focused: false,
            clickedLink: false
        }
    }

    handleSignIn(event) {
        alert("test");
    };

render (){
    return (
        <div className="LoginMainDiv">
            <CstmTextBox prompt="User Name: "/>
            <CstmTextBox prompt="Password: "/>
            <button onClick={this.handleSignIn}>Sign In</button>
            <input 
                type="text" 
                name="confirmationNumber" 
                onChange={this.props.handleInputChange}/>
        </div>
        );
    }
}

export default Login;

Open in new window

Comment
Watch Question

Web Applications Developer
Commented:
I did some digging and found out that it had to do with the fact that I wasn't binding the handleInputChange method. So you either do this:

this.handleInputChange = this.handleInputChange.bind(this);

Open in new window


or you use the ES6 syntax

handleInputChange = (event) => {

Open in new window