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