Why handleSubmit is not defined?

Question

I've looked my code over dozens of times and compared mine with Guil's, but I can't seem to figure out what it's missing. My handleSubmit function keeps coming back as undefined.

Here's my code:

import React, { Component } from 'react';

class Home extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    let teacherName = this.name.value;
    let teacherTopic = this.topic.value;
    let path = `teachers/${teacherTopic}/${teacherName}`;
    this.props.history.push(path);
  }
  render() {
    return (
      <div className="main-content home">
        <h2>Front End Course Directory</h2>
        <p>This fun directory is a project for the <em>React Router Basics</em> course on Treehouse.</p>
        <p>Learn front end web development and much more! This simple directory app offers a preview of our course library. Choose from many hours of content, from HTML to CSS to JavaScript. Learn to code and get the skills you need to launch a new career in front end web development.</p>
        <p>We have thousands of videos created by expert teachers on web design and front end development. Our library is continually refreshed with the latest on web technology so you will never fall behind.</p>
        <hr />
        <h3> Featured Teachers </h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" placeholder="Name" ref={(input)=> this.name= input}/>
          <input type="text" placeholder="Topic" ref={(input)=> this.topic= input}/>
          <button type="submit">Go!</button>
        </form>
      </div>
    );
  }
}

export default Home;

Answer 1 · 2018-07-27T06:14:33Z

July 27, 2018 6:14am

Hello there! It's happening probably 'coz you didn't bind the function handleSubmit() with the current context. React Classes are evaluated by Babel and JavaScript in strict mode (you must have read 'use strict' in many code examples). In strict mode in JavaScript, the context of the current method gets lost, whereas, in functional components and Arrow functions, every variable or const or function gets bind to the local scope, that's why Arrow Functions are recommended in javascript. Whereas, without using strict mode, if the current context can't be found, the context gets bound to the Global scope, i.e., either Window or Document.

Now, in React, handlers binding can be done in two ways, either in the constructor(recommended) or bind the method where you attach the current method.

...

class Home extends Component{
   constructor(props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
   }

  handleSubmit() {}

  render() {
    return (
      ...
      <form onSubmit={this.handleSubmit}> ..... </form>
    );
  }
}
....

OR

...

class Home extends Component{
   constructor(props) {
      super(props);
   }

  handleSubmit() {}

  render() {
    return (
      ...
      <form onSubmit={this.handleSubmit.bind(this)}> ..... </form>
    );
  }
}
....

OR (in case of functional components)

const Home = props => (
    ...
    <form onSubmit={this.handleSubmit}> ..... </form>
    ...
);

I hope it helped!

~ Ari

Answer 2 · 2018-10-18T07:54:31Z

October 18, 2018 7:54am

I ran into the same problem and updating all of the outdated dependencies in the package.json sorted things out.

Answer 3 · 2022-01-28T23:06:18Z

January 28, 2022 11:06pm

I am having the same issue as Mike 3+ years later... I tried both of Ari's suggestions as well as updating the dependencies, but no luck. If I use the "course_directory_final" files, it works fine.

Has anyone determined what could be causing this?

Welcome to the Treehouse Community

Looking to learn something new?

Stephen Powers

Stephen Powers

Why handleSubmit is not defined?

3 Answers

Ari Misha

Ari Misha

Stephen Powers

Stephen Powers

Ari Misha

Ari Misha

Rich Donnellan

Rich Donnellan

Mike Hatch

Mike Hatch

Britton Kitchell

Britton Kitchell

Jamie Reardon

Jamie Reardon