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

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points
Posted by Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Awkward moment when you go over old code and can't quite remember (React)

I know what most of my code is doing here but I'm unsure as to what the "this.props.history.push(path)" is doing in the code below. I imagine it's pushing the interpolated string to the URL? As something like that would make context in what I was trying to do, but can't quite remember! This is why I should comment my code more to save myself from headaches...

import React, { Component } from 'react';

class Search extends Component{

  constructor(){
    super();

    this.state = {
      searchText: 'search'
    }
   }

onSearchChange = e =>{
this.setState({searchText: e.target.value});
};


handleSubmit= e =>{
e.preventDefault();
e.currentTarget.reset();
let SearchTerm = this.state.searchText
let path = `search/${SearchTerm}`;
this.props.history.push(path);
}

render(){

  return(



<form className="search-form" onSubmit ={this.handleSubmit}>
        <input type="search"  placeholder="Search Flickr" onChange={this.onSearchChange} />
        <button type="submit" className="search-button">
          <svg fill="#fff" height="24" viewBox="0 0 23 23" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
            <path d="M0 0h24v24H0z" fill="none"></path>
          </svg>
        </button>
  </form>