made the search component work now

src/App.css

@@ -248,7 +248,7 @@ button:hover {
 
 input {
   display: block;
-  margin: 10px auto 0 auto;
+  margin: 10px auto 10px auto;
   width: 300px;
   height: 30px;
 }
@@ -271,6 +271,7 @@ input {
   text-align: center;
 }
 
+
 @media all and (max-width: 950px) {
 
   .navbar {

src/App.js

@@ -14,19 +14,19 @@ import MainContainer from './containers/MainContainer'
 export default class App extends Component {
 
   state = {
-      images: []
-    }
+    images: []
+  }
 
 
 
-  //The NASA API is called and then the results go to the state
-    fetchImages = (query = "") => {
-        $.ajax({
-          url: `https://images-api.nasa.gov/search?q=${query}`
-        }).then(json => {
-          this.setState({ images: json.collection.items })
-        })
-    }
+//The NASA API is called and then the results go to the state
+  fetchImages = (query = "") => {
+    $.ajax({
+      url: `https://images-api.nasa.gov/search?q=${query}`
+    }).then(json => {
+      this.setState({ images: json.collection.items })
+    })
+  }
 
   //the welcome component has the header/navbar and the button to choose to search is toggled
     render() {

src/components/SearchForm.js

@@ -23,7 +23,7 @@ class SearchForm extends Component {
         <h3 className="searchtext">Enter a Celestial Term:</h3>
         <form onSubmit={this.handleSubmit}>
           <input type="text" value={this.state.query} onChange={event => this.setState({query: event.target.value})} />
-          <Link to="/search" onClick={this.handleSubmit}><button>Submit</button></Link>
+          <Link to="/search" onClick={this.handleSubmit}><button id="searchformbutton">Submit</button></Link>
         </form>
       </div>
     )

src/components/SearchResults.js

@@ -42,9 +42,9 @@ class SearchResults extends Component {
     };
 
   // This determines the HTML to render and the card structure, mapping the images from the state onto each card
-    getResults = (query) => {
+    getResults = (images) => {
       if (this.props.getResults.length > 0) {
-        return this.props.getResults.images.map(image =>
+        return this.props.getResults.map(image =>
           <div className="cardborder">
             <div className="leftbox">
               <div className="image"><img src={this.hasImage(image.links)} alt="" /></div>
@@ -75,7 +75,6 @@ class SearchResults extends Component {
 
   //The Search field is rendered and the results are presented.
   render() {
-    debugger
     return (
       <div className="searchstuff">
         {this.getResults()}