Feature Request: Jammming

Hello everyone,

I am trying to implement a search by hitting the enter key on the keyboard but my code doesn’t yield the needed results.

Below is my code for 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;

hi @nicholasd.brown ,

so what’s the result you’d like to achieve? Could you elaborate further.

Hello @estforesta ,
I want initiate a search by hitting the enter key on the keyboard and not always clicking the SEARCH button so as to improve usability.

Before the render function, I declared a function handleKeyPress to handle the function.

However, it seems the changes I made does not reflect in my work. Maybe my code for that is wrong or there is a mistake somewhere.