I defined component and used it App.js but getting undefined error-CodePudding

When I try to access the relevant component under app.js, I get the error "WARNING in [eslint] rc\App.js Line 2:8: 'personAdd' is defined but never used no-unused-vars". When I run the project, I see tags in the form of in html, but the component does not appear on the screen. I have included the codes below. Thanks in advance. Note : Changes under .eslintrc.json didn't work.

App.js

import React from 'react';
import personAdd from './screens/personAdd';

function App() {
    return (
      <personAdd /> 
    )
}

export default App;

personAdd.js

import React from 'react';

class personAdd extends React.Component{
    render(){
        return(
            <div id = "personAdd">
                <h1>Kullanıcı Bilgileri</h1>
                <form>
                    <label htmlFor="id">Ad</label>
                    <input id="id"/>
                    <button>Add</button>
                </form>
            </div>
        )
    }
}

export default personAdd;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import personAdd from './screens/personadd';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
  <React.StrictMode>
    <personAdd />
  </React.StrictMode>
);*/

CodePudding user response：

You don't need to manually create new root elements for every component you want to render.

React inserts an initial element 'root' into the DOM so that the app can render within that.

Try removing:

/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
  <React.StrictMode>
    <personAdd />
  </React.StrictMode>
);*/

If you want to render your personAdd component you can add it as a child of App as you've already done.

function App() {
    return (
      <personAdd /> 
    )
}

The other reason you're getting these issues is because you're not using Pascal case when naming your components (PersonAdd).

function App() {
    return (
      <PersonAdd /> 
    )
}

In addition as others have mentioned, stick to function components rather than class components.

I'd recommend having a look at the React Beta Docs which now do everything with functional components. There are helpful walkthroughs on there that should help you out.

CodePudding user response：

As @evolutionxbox said. Try naming the component with UpperCamelCase. It's used to specify a React element https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

Also, it is now common to create components as functions and not Classes. Of course it's up to you if you do prefer classes. https://reactjs.org/docs/components-and-props.html#rendering-a-component