Jammming SearchBar "render method should have a return statement"

Hi guys,

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


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.

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>

export default SearchBar;

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) {
    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 (
          Ja<span className="highlight">mmm</span>ing
        <div className="App">
          <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults} />
            <Playlist />

export default App;