ReactJS:'languagefunction' is declared but its value is never read - reactjs

Question

I am using react framework to call a function from one component(languagefunction.js) to other component app.js
languagefunction.js
import React, { Component } from "react";
const languagefunction= () => <h1>hello Sir</h1>
export default languagefunction
App.js
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import {Dropdown,DropdownButton}from 'react-bootstrap';
import Login from "./components/login.component";
import SignUp from "./components/signup.component";
import languagefunction from "./components/languagefunction";
function App() {
return (<Router>
<div className="App">
<languagefunction/>
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link className="navbar-brand" to={"/sign-in"}>Tira Desk</Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={"/sign-in"}>Sign in</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={"/sign-up"}>Sign up</Link>
</li>
<li>
<DropdownButton id="dropdown-basic-button" title="Dropdown button">
<Dropdown.Item eventKey="english_language">English</Dropdown.Item>
<Dropdown.Item eventKey="tamil_language">Tamil</Dropdown.Item>
</DropdownButton>
</li>
</ul>
</div>
</div>
</nav>
<div className="outer">
<p>Testing</p>
<div className="inner">
<Switch>
<Route exact path='/' component={Login} />
<Route path="/sign-in" component={Login} />
<Route path="/sign-up" component={SignUp} />
</Switch>
</div>
</div>
</div></Router>
);
}
export default App;
The issue i am facing is "'languagefunction' is declared but its value is never read."
I have declared the value "import languagefunction from "./components/languagefunction" and used it in <languagefunction/>
I hope i have done it right, care to explain what is the mistake i am making.

Answer 1

In React components need to start with a capital letter, try this instead:
Languagefunction.js
const Languagefunction= () => <h1>hello Sir</h1>
export default Languagefunction
App.js
...
import Languagefunction from "./components/Languagefunction";
function App() {
return (<Router>
<div className="App">
<Languagefunction/>
...