Jammming SearchBar "render method should have a return statement"

Projects
1

Hi guys,

I have an error below showing up when rendering the webpage:
"Compiled with problems:X

ERROR

[eslint]
src/Components/App/SearchBar/SearchBar.js
Line 6:3: Your render method should have a return statement react/require-render-return

Search for the keywords to learn more about each error."

I have checked my code in SearchBar component and can not see anything wrong with it.

Please help. I am at level 33 now but can not see the rendered page because of this ongoing error.

//SearchBar.js
import React from "react";

import "./SearchBar.css";

class SearchBar extends React.Component {
  render() {
    return (
      <div className="SearchBar">
        <input placeholder="Enter A Song, Album, or Artist" />
        <button className="SearchButton">SEARCH</button>
      </div>
    );
  }
}

export default SearchBar;

//App.js
import React from "react";
import "./App.css";

import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state.searchResults = {};
    this.state = {
      searchResults: [
        { name: "name1", artist: "artist1", album: "album1", id: 1 },
        { name: "name2", artist: "artist2", album: "album2", id: 2 },
        { name: "name3", artist: "artist3", album: "album3", id: 3 },
      ],
    };
  }

  render() {
    return (
      <div>
        <h1>
          Ja<span className="highlight">mmm</span>ing
        </h1>
        <div className="App">
          <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults} />
            <Playlist />
          </div>
        </div>
      </div>
    );
  }
}

export default App;