[SOLVED] Parsing Error : Identifier 'App' has already been declared

Parsing Error : Identifier 'App' has already been declared

I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error. Below I am sharing the code of App.js file and the browser generated error.

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

import PlayList from "./componentes/PlayList"
import SearchBar from "./componentes/SearchBar"
import SearchResults from "./componentes/SearchResults"


class App extends React.Component{
//code to be written
}

function App() {
  return (
    <div>
      <h1>
        <a href="http://localhost:3000">Melophile</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;

Browser error:

Compiled with problems:

ERROR in ./src/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)

  11 | }
  12 |
> 13 | function App() {
     |          ^
  14 |   return (
  15 |     <div>
  16 |       <h1>

Looking for experts help to solve this problem.

Solution

The error you are seeing is because you have these two things:

class App extends React.Component{

And

function App() {

Therefore, there is a problem identifying what you are referring to. You either need to rename one of these places or decide what you want to work with (class or functions).