React, Jamming Project - search method doesnt receive the term

[code6165384018]

Hi guys ive done the Codeacademy Jamming project with React and I’m having some issues when searching for a song. What I mean is that my API doesn’t receive the term Im passing in and receives ‘undefined’ so it searches for it, as in the screenshot above. As you can see from Dev too.

But sincerely i cant find nothing wrong in the code that involves the passing of the term, so i would really appreciate the help of someone.Im attaching the interested code from:

App.js:

search(term){
  Spotify.search(term).then(SearchResults => {
    this.setState({SearchResults: SearchResults})
  })
}

SearchBar.js

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

export class SearchBar extends React.Component{
constructor(props){
    super(props);
    this.search = this.search.bind(this);
    this.handleTermChange = this.handleTermChange.bind(this);
}

search(){
    this.props.onSearch(this.state.term);
}
handleTermChange(event){
    this.setState({state: 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>
        );
    }
}

Spotify.js

search(term){
            const accessToken = Spotify.getAccessToken();
            return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,
            {headers: {
                Authorization: `Bearer ${accessToken}`
            }}).then(response => {
                return response.json();
            }).then(jsonResponse => {
                if(!jsonResponse.tracks){
                    return [];
                }
                return jsonResponse.tracks.items.map(track => ({
                    id: track.id,
                    name: track.name,
                    artist: "pippi baudo",
                    album: track.album.name,
                    uri: track.uri
                }));
            })
    },

Thanks you all

[selectall]

Hello, and welcome to the forums!

@code6165384018

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

Double check this part. You used this.state.term when conducting a search, but your handler is setting the value of this.state.state using the this.setState() call.

One other thing you should do is set the initial value of your state in the constructor