React component cannot read property of undefined

Question

I'm new to React and am currently working through learning how to make an appointment style web app, but there's a bug I don't quite understand how to fix. The bug is:

Uncaught TypeError: Cannot read property 'onUserInput' of undefined

The relevant code is an appointments comp which serves as the parent component and an appointment_form comp as the child component.

The error occurs when the AppointmentForm tries to call onUserInput from its handleChange method. To me, the error sounds like I'm not calling the method properly but I haven't found a way to fix it. Any help would be appreciated, thank you

class Appointments extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = {
          appointments: this.props.appointments,
          input_title: "Team Startup Meeting",
          input_apt_time: 'Tomorrow at 9am'
        };
    }

    handleUserInput(obj)
    {
        this.setState(obj);
    }

    handleFormSubmit()
    {
        var appointment = {title: this.state.title,
                      apt_time: this.state.apt_time}
        $.post('/appointments',
        {appointment: appointment});
    }

    render()
    {
        return (

            <div>
                <AppointmentForm input_title={this.state.input_title}
                    input_apt_time={this.state.input_apt_time}
                    onUserInput={this.handleUserInput} />

                <AppointmentsList appointments={this.props.appointments}
                onFormSubmit={this.handleFormSubmit}/>
            </div>
        );
    }
}

class AppointmentForm extends React.Component {

    handleChange(e)
    {
        var name = e.target.name;
        obj = new Object();
        obj.name = e.target.value;
        this.props.onUserInput(obj);
    }

    handleSubmit(e)
    {
        e.preventDefault();
        this.props.onFormSubmit();
    }

    render()
    {
        return (
            <div>
                <h2>Make an Appointment</h2>
                <form onSubmit={this.handleSubmit.bind(this)}>
                <input name="title" placeholder="Appointment Title"
                    value={this.props.input_title}
                    onChange={this.handleChange}/>
                <input name="apt_time" placeholder="Date and Time"
                    value={this.props.input_apt_time}
                    onChange={this.handleChange} />
                <input type="submit" value="Make Appointment" />
                </form>
          </div>
        )
    }
}

The apponintmentform component does not have a constructor to handle props, so props is not defined for that component? — anneb, Jun 13 '18 at 23:21

score 1 · Answer 1 · answered Jun 13 '18 at 23:18

You should bind an instance of component to this of your handleChange method inside of components constructor:

class AppointmentForm extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    ..........
}

React component cannot read property of undefined

1 Answers1