Parsing Error : Identifier 'App' has already been declared

Question

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.

Answer 1

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).

Answer 2

You have a class named App and a function named App. You can't have two things named the same.

What it appears you've done is mixed class-based React syntax with more modern functional syntax. Since you don't have anything written inside the class yet, it seems safe to assume you're not actually using class-based syntax, so you can simply remove the class (delete the following)

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

Answer 3

In your code you declared App class and then declare App function. So It's giving that App is already declared.

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

So you can do,

1. Rename any one
2. Remove any one
3. Declare function inside class with diff name of class or function

Answer 4

you can use class based component or hook based component. you can't use mix of them. you can look for more detail information.. https://reactjs.org/docs/hooks-intro.html