Unexpected Token of '<' in the create a spotify playlist app exersize - help needed with React!

Hi everybody!

I am currently working on the ‘Create a Playlist App With the Spotify API (Part One)’ exersize in the Front-End Development course and I am running into some trouble. I keep encountering the following error:

Compiled with problems:X

ERROR in ./src/Components/App/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ...\jammming\src\Components\App\App.js: Unexpected token (21:4)

  19 |
  20 |   return (
> 21 |     <div className = "App" >
     |     ^
  22 |       <header className="App-header">
  23 |         <div>
  24 |           <h1>Ja<span className="highlight">mmm</span>ing</h1>

  Line 21:4:  Parsing error: Unexpected token (21:4)

I don’t understand why it wont take ‘<’ as a valid piece of the code. I found somehwere that you need to alter the browserlist in the package.JSON file, so I changed that to:

 "browserslist": 
    [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]

But that hasn’t changed anything. The code of App.js is the following:

import React from 'react';
import './App.css';

import { SearchBar } from '../SearchBar/SearchBar.js';
import { SearchResults } from '../SearchResults/SearchResults.js';
import { Playlist } from '../Playlist/Playlist.js';


class App extends React.Component {
  constructor(props) {
    super(props);

    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 }]
    }
  }

  return (
    <div className = "App" >
      <header className="App-header">
        <div>
          <h1>Ja<span className="highlight">mmm</span>ing</h1>
          <div class="App">
            <SearchBar />
            <div className="App-playlist">
              <SearchResults searchResults={this.state.searchResults}/>
              <Playlist />
            </div>
          </div>
        </div>
        <p>
          Edit <code>src/App.js</code> and save to check check.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

I am at a bit of a loss, thanks if anybosy will have a look at it!

Did you figure this out already?
Is this a warning you get in the editor? Or is this what is logging in the browser?

Make sure the language selected in the editor is React. If not, it may be trying to parse this incorrectly.

I had to start over i’m affraid, haven’t found the issue