Search Component and Lifting State Up in Callback Props

music-master/src/components/App.js

@@ -1,25 +1,15 @@
 import React, { Component } from 'react';
+import Search from './Search';
 import Artist from './Artist';
 import Tracks from './Tracks';
 
 const API_ADDRESS = 'https://spotify-api-wrapper.appspot.com';
 
 class App extends Component {
-  state = { artistQuery: '', artist: null, tracks: [] };
+  state = { artist: null, tracks: [] };
 
-  updateArtistQuery = event => {
-    console.log('event.target.value', event.target.value);
-    this.setState({ artistQuery: event.target.value });
-  }
-
-  handleKeyPress = event => {
-    if (event.key === 'Enter') {
-      this.searchArtist();
-    }
-  }
-
-  searchArtist = () => {
-    fetch(`${API_ADDRESS}/artist/${this.state.artistQuery}`)
+  searchArtist = artistQuery => {
+    fetch(`${API_ADDRESS}/artist/${artistQuery}`)
       .then(response => response.json())
       .then(json => {
         if (json.artists.total > 0) {
@@ -42,12 +32,7 @@ class App extends Component {
     return (
       <div>
         <h2>Music Master</h2>
-        <input
-          onChange={this.updateArtistQuery}
-          onKeyPress={this.handleKeyPress}
-          placeholder='Search for an artist'
-        />
-        <button onClick={this.searchArtist}>Search</button>
+        <Search searchArtist={this.searchArtist} />
         <Artist artist={this.state.artist} />
         <Tracks tracks={this.state.tracks} />
       </div>

music-master/src/components/Search.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+class Search extends Component {
+
+  state = { artistQuery: '' };
+
+  updateArtistQuery = event => {
+    console.log('event.target.value', event.target.value);
+    this.setState({ artistQuery: event.target.value });
+  }
+
+  handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      this.searchArtist();
+    }
+  }
+
+  searchArtist = () => {
+    this.props.searchArtist(this.state.artistQuery);
+  }
+
+  render() {
+    return (
+      <div>
+        <input
+          onChange={this.updateArtistQuery}
+          onKeyPress={this.handleKeyPress}
+          placeholder='Search for an artist'
+        />
+        <button onClick={this.searchArtist}>Search</button>
+      </div>
+    )
+  }
+}
+
+export default Search;