Mk search bar2

src/App.js

@@ -4,7 +4,6 @@ import MovieSearch from './components/MovieSearch.js';
 import MovieLibrary from './components/MovieLibrary.js';
 import CustomerList from './components/CustomerList.js';
 import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
-import axios from 'axios'
 
 class App extends Component {
   constructor(props){

src/Nav.js

@@ -1,6 +1,5 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {Link} from 'react-router-dom'
-// import './App.css';
 
 function Nav(){
   return (

src/components/CustomerList.js

@@ -3,7 +3,6 @@ import Customer from './Customer'
 import {Route, Link} from 'react-router-dom'
 import axios from 'axios';
 
-
 class CustomerList extends Component {
   constructor(props){
     super(props)

src/components/Movie.js

@@ -1,11 +1,6 @@
 import React, { Component } from 'react';
-import axios from 'axios'
 
 class Movie extends Component {
-  // constructor(props){
-  //   super(props)
-  // }
-
   render() {
     return (
       <div>

src/components/MovieLibrary.js

@@ -43,7 +43,7 @@ class MovieLibrary extends Component {
   render() {
     return (
       <div className="App">
-        <h1>MovieLibrary</h1>
+        <h1>Movie Library</h1>
         {this.displayMovies()}
       </div>
     );

src/components/MovieSearch.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Movie from './Movie.js'
 import axios from 'axios'
 
 class MovieSearch extends Component {
@@ -7,19 +8,18 @@ class MovieSearch extends Component {
 
     this.state = {
       searchValue: '',
+      results: [],
       error: '',
     }
   }
 
-
-
   findMovie = (title) => {
-    // const title = this.state.searchValue;
-    console.log('it worked?????!')
     axios.get(`http://localhost:3000/movies`, {params: {query: title}})
     .then((response) => {
-      console.log('it worked!')
-      console.log(response)
+      const responseResults = response.data.map((entry) => {
+        return (entry)
+      })
+      this.setState({results: responseResults})
     })
     .catch((error) => {
       this.setState({ error: error.message });
@@ -42,20 +42,32 @@ class MovieSearch extends Component {
     const newSearch = {
       searchValue: this.state.searchValue,
     }
-    console.log('now???')
-    console.log(newSearch)
+
     this.findMovie(newSearch.searchValue);
 
     this.setState({
       searchValue: '',
     });
   }
 
+  searchResults = () => {
+    if (this.state.results.length > 0){
+      const foundResults = this.state.results.map((movie, i) => {
+        return (
+          <Movie 
+            key = {i}
+            title = {movie.title}
+          />
+        )
+      })
+      return foundResults
+    }
+  }
 
   render() {
     return (
       <div>
-        <h1>MovieSearch</h1>
+        <h1>Movie Search</h1>
         <section>
         <form onSubmit={this.onSubmitSearch}>
           <input 
@@ -69,6 +81,9 @@ class MovieSearch extends Component {
           </div>
         </form>
       </section>
+      <section>
+        {this.searchResults()}
+      </section>
       </div>
     );
   }