Feature Request: Jammming

Hello everyone,

I am trying to implement a search by pressing the enter keyword to search for songs or artistes but my code can’t yield the desired results.

This is my code for the SearchBar.js. I would gladly welcome your feedback.

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);
        this.handleKeyPress = this.handleKeyPress.bind(this);
    }

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

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

    handleKeyPress (){
        const inputSelect = document.querySelector('.InputSearch');
        inputSelect.addEventListener('keyup', (event) => {
            if (event.keyCode === 13){
                this.props.onSearch(this.state.term)
            }
        })
    }

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

export default SearchBar;

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.