0

Here, my IDE is complaining that searchBar is declared but never used. However, I use it in my template class. Also, when I run the react-app, I can't see the text from the searchBar class. What's going on here?

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header'
import Footer from './footer'

class searchBar extends React.Component {
 render() {
   return (
     <div>
       <p>search bar here</p>
     </div>
   )
 }
}


class Layout extends React.Component {
 render() {
   return (
     <div>
       <Header />
       <searchBar />
       <Footer />
     </div >
   )
 }
}

ReactDOM.render(
 <Layout />,
 document.getElementById('root')
);
ianwt
  • 89
  • 1
  • 9
  • IIRC, `searchBar` should start with an upper case S. I think react differentiates native DOM elements and components this way. – maazadeeb Jan 28 '21 at 21:19

1 Answers1

1

Components have to start with Capital letters. So your class searchBar extends React.Component { has to become class SearchBar extends React.Component { and you have to render it like so:

<SearchBar />
codemonkey
  • 7,325
  • 5
  • 22
  • 36