Kamyar Parastesh Kamyar Parastesh - 1 month ago 12
React JSX Question

Uncaught ReferenceError: Searchbar is not defined

Sorry, i am new in React.
I have 2 components in my react application. Here is the parent:

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

const App =() => {

return (
<div className="App">
<div className="App-header">
<Searchbar></Searchbar>
<h2>Welcome to React</h2>
</div>
</div>
);

}

export default App;


and here is the searchbar component:

import React,{Component} from 'react';

export default class Searchbar extends Component{

render(){

return <div>Here is search bar</div>;
}
}


Unfortunately, when the page loads it complains with the error:

Uncaught ReferenceError: Searchbar is not defined


It seems that, it does not recognize the Searchbar component.
What is the problem?

Answer

The solution is really simple. You are importing the searchbar wrongly in your file. You need to import it like import Searchbar from './Searchbar'; , since you have exported it as default you also need to import it in default manner.

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

const App =() => {

    return (
      <div className="App">
        <div className="App-header">
            <Searchbar></Searchbar>
            <h2>Welcome to React</h2>
        </div>
      </div>
    );

}

export default App;