Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Going Further with Routing Navigating Routes Programmatically

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

"input is undefined" compilation error

Hello treehouse students :)

I'm having some trouble finishing off this course. The input variables don't seem to be recognised per the compilation error below. Help :D

./src/components/Home.js
  Line 25:  'input' is not defined  no-undef
  Line 25:  'input' is not defined  no-undef
  Line 26:  'input' is not defined  no-undef
  Line 26:  'input' is not defined  no-undef

Search for the keywords to learn more about each error.
home.js
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;
featured.js
import React from 'react';

const Featured = ({match}) => {

  let name = match.params.name;
  let topic = match.params.topic;

  return (
    <div className="main-content">
      <h2>Featured: </h2>
      <p>Introducing <strong>{name}</strong>, a teacher who loves teaching courses about <strong>{topic}</strong>!</p>
    </div>
  );
}

export default Featured;

1 Answer

Hi Jonathan,

This material is a little over my head for now, but I can try to take a stab at what might be wrong. After watching the video it looks like the ref attributes in Home.js expect a callback function =>, but right now they are using =. Slap a carrot on the end of those two refs on lines 25 and 26 and let me know if it works!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

lucky there's a new course coming up on callback functions eh ;)

Thank you! I looked quite hard around the code for a fix but utterly incapable of spotting that haha