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){
        this.state = {
            term: ''

        this.search = this.search.bind(this);
        this.handleTermChange = this.handleTermChange.bind(this);
        this.handleKeyPress = this.handleKeyPress.bind(this);

    search (){

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

    handleKeyPress (){
        const inputSelect = document.querySelector('.InputSearch');
        inputSelect.addEventListener('keyup', (event) => {
            if (event.keyCode === 13){

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

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.