Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

carlos .
carlos .
9,703 Points

Name & Topic assigned a value but never used. 'Path' is assigned a value but never used

Here's the repo: https://github.com/CarlosTobin/course-directory

The input fields are supposed to return and render the Teacher and Topic, but are not. Somehow I am not using the value I assigned. Any ideas why?

Compiled with warnings.

./src/components/Featured.js

Line 4: 'name' is assigned a value but never used no-unused-vars

Line 5: 'topic' is assigned a value but never used no-unused-vars

./src/components/Home.js

Line 9: 'path' is assigned a value but never used no-unused-vars

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}` ;
  }   
  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>
              <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></strong>, a teacher who loves teaching courses about <strong></strong>!</p>
    </div>
  );
}

export default Featured;

App.js

import React from 'react';
import{
  BrowserRouter, 
  Route,
  Switch
} from 'react-router-dom';

import Header from './Header';
import Home from './Home'; 
import About from './About';
import Teachers from './Teachers';
import Courses from './Courses'
import NotFound from './NotFound';
import Featured from './Featured';

const App = () => (
  <BrowserRouter> 
      <div className="container">
          <Header /> 
          <Switch>
          <Route exact path="/"component={Home}/>
          <Route path="/About" render={ () => <About title='About'/> } />
          <Route path="/Teachers" component={Teachers}/>
         <Route  path="/teachers/:topic/:name" component={Featured} />
          <Route path="/Courses" component={Courses}/>
          <Route component={NotFound} />
          </Switch>
      </div>
  </BrowserRouter>
);

export default App;

Course.js

import React from 'react';

const Course = (props) => (
  <li className="course media group">
    <img className="course-img" src={props.img} alt="course" />
    <div>
      <h3>{props.title}</h3>
      <p>{props.desc}</p>
    </div>
  </li>
);

export default Course;
Ken Stone
Ken Stone
29,702 Points

I'm working on the same courses though I just swerved and am now taking a few SQL courses to possibly help with a job I just applied for. If I figure anything out I'll let you know.

4 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

carlos .

In Featured.js you should include only the name and topic variables in return. You're currently using <strong>{this.match.params.name}</strong> vs <strong>{name}</strong> etc.

Ken Stone
Ken Stone
29,702 Points

in Home.js

 <form onSubmit={this.handleSubmit}>

looks like your missing the onSubmit event handler in the form.

carlos .
carlos .
9,703 Points

Good catch. Thanks. Still getting the same error messages though.

handleSubmit = (e) => {
    e.preventDefault(); 
    let teacherName = this.name.value; 
    let teacherTopic = this.topic.value; 
    let path = `teachers/${teacherTopic}/${teacherName}` ;
  }   
  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;
Ken Stone
Ken Stone
29,702 Points
 let path = `teachers/${teacherTopic}/${teacherName}` ;

I don't think it matters but there's a space before the semicolon there. Also don't forge to update the history.

carlos .
carlos .
9,703 Points

Thanks Ken. Still can't figure it out. Here's the repo: https://github.com/CarlosTobin/course-directory

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hey carlos .

Thanks for linking to the repo. In Featured.js, you've declared the name and topic variables, but you're not using them in return to display the names and topics.

Also, Home.js is missing this.props.history.push(path) in handleSubmit. And, in App.js, the "teachers" route path should be exact path="/teachers". Hope this helps. :)

carlos .
carlos .
9,703 Points

Thank you Guil Hernandez. I was able to solve one of the errors. However, am still getting two errors. Not sure why. I pushed the first fix to the repo: https://github.com/CarlosTobin/course-directory.git