How to Fix React JS Unused variable like below shown?-CodePudding

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

CodePudding user response：

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;

CodePudding user response：

If you want to use a component in ReactJS, capitalize the first letter:

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

CodePudding user response：

All components must start with a capital letter so you need to change each instance from person to Person

CodePudding user response：

All you need to do is rename

const person = () => ...

const Person = () => ...

As per the React docs, when you create your own custom component, the component name needs to start with a capital letter. Otherwise, React thinks it is an HTML tag and tries to render it as one.