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.

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

class SearchBar extends React.Component {

  constructor(props) {

    this.state = {
      term: ''
    } =
    this.handleTermChange = this.handleTermChange.bind(this)

  search() {

  handleTermChange(event) {

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

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


<SearchBar onSearch={} />

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