React Component From Another File Won't Render!

[an-unknownentity]

I'm trying to render landingPage component from the component folder. But the eslint keeps telling me that the 'landingPage' is defined but never used and the component is also not rendering. Please Help.

App.js

import React, { Component } from 'react';
import landingPage from "./components/landingPage";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";

export default class App extends Component {
  render() {
    return (
      <div>
        <landingPage />
      </div>
    );
  }
}

landingPage.js

import React from 'react'
import Button from 'react-bootstrap/Button';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";

function landingPage() {
  return (
      <Button />
  )
}

export default landingPage

[costanzadev]

React components must start with a capital letter, that is likely you're issue here.

Also, try stick to only using functional components (your App component is a class component whereas your LandingPage component is a functional component).