title: Cannot add component in React
body: <p>I am trying to add footer.js in my react App.js</p>
  <p>This is my app.js.</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  
  import Navbar from &quot;./Navbar&quot;;
  class App extends Component {
    render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;BrowserRouter&gt;
            &lt;div&gt;
              &lt;Navbar /&gt;    
              &lt;Switch&gt;
                &lt;Route path=&quot;/&quot; exact component={Home} /&gt;
                &lt;Route path=&quot;/SignIn&quot; component={SignIn} /&gt;
              &lt;/Switch&gt;
              &lt;navfooter /&gt;
            &lt;/div&gt;
          &lt;/BrowserRouter&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>In my App.js file, I have used NavBar and it is working fine. I am using the same concept to add footer.js file in App.js file. I could also try using a pre-built footer file, but I wanted my own footer file.
  this is my footer.js</p>
  <pre><code>import React from &quot;react&quot;;
  
  const navfooter = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;p&gt;footer&lt;/p&gt;
      &lt;/div&gt;        
    );
  };
  
  export default navfooter;
  </code></pre>
  <p>And it shows like this:</p>
  <p><a href="https://i.stack.imgur.com/yjASU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yjASU.png" alt="enter image description here" /></a></p>
  <p>My code editor, VS Code is not showing any errors or warnings.
  But the console shows an error:</p>
  <p><a href="https://i.stack.imgur.com/iTlFL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iTlFL.png" alt="enter image description here" /></a></p>
  <p>SO what am I doing wrong?</p>