Create a Playlist App With the Spotify API (Part One) this.props.onSearch is not a function

Hi just finished the Spotify playlist web app but I have a TypeError : this.props.onSearch is not a function but I honestly don’t know why or what should I look for.
So if someone know why or can guide me it would be nice.
Thanks.

import React from "react";
import './SearchBar.css'

class SearchBar extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      term: ''
    }

    this.search = this.search.bind(this)
    this.handleTermChange = this.handleTermChange.bind(this)
  }

  search() {
    this.props.onSearch(this.state.term)
  }

  handleTermChange(event) {
    this.setState({term: event.target.value})
  }

  render() {
    return (
      <div className="SearchBar">
        <input placeholder="Enter A Song, Album, or Artist" onChange={this.handleTermChange}/>
        <button className="SearchButton" onClick={this.search}>SEARCH</button>
      </div>
    )
  }
}

I don’t think you’re looking in the right place; you ought to have defined the onSearch property of the SearchBar component when you added it into App.js

App.js:

<SearchBar onSearch={this.search} />

Please post your App.js - and please use the Codeblock feature rather than the Codebyte one, as it makes things much easier to read (and a lone React file is never going to execute correctly in a Codebyte anyway). I’ve edited your original post to be a Codeblock, if you need to see how to do it. :slight_smile:

Hi again, sorry I didn’t know how to post Codeblock, it will be done next time.
I changed the attribute on SearchBar in the app.js and it worked well. Thanks for your response.

1 Like

No worries; if we were dealing with a self-contained program, then a Codebyte would be better as we can run it (and get the output) right here on the forum. With React, because it’s all self-contained components which are assembled later, the Codebyte doesn’t work for that really and you lose a lot of space to the wrapper for it.

Either way, glad you were able to find and fix the error. :slight_smile:

1 Like