can anyone helps me to solve this error - Parsing error: identifier 'App' has already been declared

Question

I'm making this music app from online video tutorial of Simplilearn but I got this one parsing error while doing this so anyone can suggest me what to do... did I have to change the name of the class or function?

Parsing error: identifier 'App' has already been declared

import React,{ Component } from 'react';
import './App.css';

import Playlist from '';`enter code here`
import SearchBar from '';
import SearchResults from '';
import Spotify from '';


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

      this.state = {
        SearchResults: [],
        playlistName: "new Playlist",
        playlistTracks: []
      };

      this.search = this.search.bind(this);
      this.addTrack = this.addTrack.bind(this);
      this.removeTrack = this.removeTrack.bind(this);
      this.updatePlaylistName = this.updatePlaylistName.bind(this);
      this.savePlaylist = this.savePlaylist.bind(this);
      this.removeTrackSearch = this.removeTrackSearch.bind(this);
      this.doThese = this.doThese.bind(this);
    }

    search(term) {
      Spotify.search(term).then( SearchResults => {
          this.setState({ SearchResults: SearchResults });
      });
    }

    addTrack(track) {
      let tracks = this.state.playlistTracks;
      if(tracks.find( savedTrack => savedTrack.id === track.id )){
        return;
      }
      tracks.push(track);
      this.setState({ playlistTracks: tracks });
    }

    removeTrack(track) {
      let tracks = this.state.playlistTracks;
      let trackSearch = this.state.SearchResults;
      tracks = tracks.filter( currentTrack => currentTrack.id !== track.id );
      trackSearch.unshift(track);
      this.setState({ playlistTracks: tracks });
    }

    removeTrackSearch(track) {
      let tracks = this.state.SearchResults;
      tracks = tracks.filter( currentTrack => currentTrack.id !== track.id );
      this.setState({ SearchResults: tracks });
    }

    doThese(track) {
      this.addTrack(track);
      this.removeTrackSearch(track);
    }

    updatePlaylistName(name) {
      this.setState({ updatePlaylistName: name });
    }

    savePlaylist() {
      const trackUris = this.state.playlistTracks.map( track => track.uri );
      Spotify.savePlaylist(this.state.playlistName, trackUris).then( () => {
        this.setState({
          updatePlaylistName: "new Playlist",
          playlistTracks: []
        });
      });
    }
}


 function App() {
    return (
      <div>
        <h1>
          <a href = "https://localhost:3000" >Musicophile</a>
        </h1>

        <div className="App">
          <SearchBar onSearch={this.search} />

              <div className="App-playlist">

                  <SearchResults
                      SearchResults={this.state.SearchResults}
                      onAdd={this.doThese} />

                  <Playlist
                      playlistTracks={this.state.playlistTracks}
                      onNameChange={this.updatePlaylistName}
                      onRemove={this.removeTrack}
                      onSave={this.savePlaylist} />

              </div>
        </div>
      </div>
    );
 }

export default App;

Answer 1

You are trying to initialize two variables (App in this case) which has the same name. Rename one of your components to something else.

Now the original question is solved, here's the hard part. There are so many things wrong with the code besides the duplicated App.

1. The class component App does not have a render function.
2. Mixing function components and class components. It will work but it is just bad practice.
3. State mutation. e.g.

let tracks = this.state.playlistTracks;
// ... omitted
tracks.push(track); // NO!!!!!

4. Unusable import statement. I'm not sure did you remove the import part deliberately or what, but if you copy and paste the imports directly, it will defiantly fail.
5. Using this in a function component.