title: Component Not Showing Content in React Application
body: <p>I created a page in my application to display rows of cards, featuring only the title and an image. But, for some reason, the content is not showing. There are no errors and, as far as I can see, now problems with the syntax. I don't understand why my component is producing a blank page. </p>
  
  <p>I've used a similar method for other pages and those worked, so I don't see where I'm going wrong here. Could somebody please help me understand why my component isn't appearing on this particular page? I'd really appreciate it.</p>
  
  <p>Listed below is my code, along with a picture of how I set up my files.</p>
  
  <p><a href="https://i.stack.imgur.com/aD5Gx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aD5Gx.png" alt="File Setup"></a></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter, Route, Switch} from 'react-router-dom'
  import Navbar from './components/Navbar/navbar.js';
  import Footer from './components/Footer/footer.js';
  import Home from './pages/Home/home.js';
  import Login from './pages/Login/login.js';
  import Languages from './pages/Languages/languages.js';
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;BrowserRouter&gt;
          &lt;Navbar/&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/" component={Home}/&gt;
              &lt;Route path="/login" component={Login}/&gt;
              &lt;Route path="/languages" component={Languages}/&gt;
            &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Languages.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import LangCard from "../../components/LangCard/langcard.js";
  import './languages.css';
  
  class Languages extends Component {
      render() {
          return (
              &lt;div className="row"&gt;
                  &lt;LangCard /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Languages;
  </code></pre>
  
  <p><strong>LangCard.js</strong></p>
  
  <pre><code>import React from 'react';
  import Card from 'react-bootstrap/Card';
  import './langcard.css';
  
  const LangCard = () =&gt; {
      return (
          &lt;div className="container"&gt;
              &lt;div className="row" &gt;
                  &lt;Card id="lang-card"&gt;
                      &lt;div className="card-img"&gt;&lt;/div&gt;
                          &lt;Card.Body&gt;
                              &lt;Card.Title&gt;Italian&lt;/Card.Title&gt;
                          &lt;/Card.Body&gt;
                  &lt;/Card&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default LangCard;
  </code></pre>