How to Fix React JS Unused variable like below shown?

Question

I created a new ReactJS app and corded it as below. It doesn't work. I need const person call into const app, How to do that?

"App.js"

import './App.css';
const person = () => {
  return (
    <>
    <h1>Name : Shashimal</h1>
    <h1>Age : 26</h1>
    <h1>Gender : Male</h1>
    </>
  )
}
const App = () => {
  return (
    <div className="App">
       <person />
    </div>
  );
}
export default App;

error code shown terminal

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src\App.js
  Line 3:7:  'person' is assigned a value but never used  no-unused-vars

webpack compiled with 1 warning

Answer 1

The problem is that when it comes to React components you must use component names first word capitalized. So, make person to Person

import './App.css';

const Person = () => {
  return (
    <>
      <h1>Name : Shashimal</h1>
      <h1>Age : 26</h1>
      <h1>Gender : Male</h1>
    </>
  );
};
const App = () => {
  return (
    <div className="App">
      <Person />
    </div>
  );
};

export default App;