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>
);*/
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.
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
I have a project using react-router v6, and I am getting an error stating useNavigate() may be used only in the context of a <Router> component.
For some background, I have two projects that live in the same repo and get built together. We leverage code splitting and import them as needed, not sure if this matters.
Now, I have a setup that is pretty simple:
(in the #dummyInc/components project)
Dummy.tsx
import React from 'react'
export function Dummy() {
const navigate = useNavigate()
return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div>
}
Then my code uses it in a different project that is just imported.
(in the #dummyInc/site project)
App.js
import React from 'react'
import Dummy from '#dummyInc/components'
export function App() {
return <div> <Dummy /> </div>
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './src/App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
Now I have the above and when I try to render it in the browser, it says the following, but I'm not sure how that's possible, it's being rendered in that context.
Error: useNavigate() may be used only in the context of a <Router> component.
Am I missing something? Any help is appreciated.
when i have my functions in UserAuthContext.js my App isn't working properly. I try to login but the user is not directet to /browse as it should. But if i put the same code in app.js i can create and login with an account. I don't know what the reason is
here is the code
https://codesandbox.io/s/cool-euler-eicfr?file=/src/App.js
-not working version (above code belongs to this): https://not-working.netlify.app/
-working version where i have the code in app.js
https://netflix-clone-kasamtde.netlify.app/
You cannot use useAuthContext in a component that is not a child of UserAuthContextProvider. It will always return undefined
Easiest fix for this is to move UserAuthContextProvider into index.js:
// index.js
import React from 'react';
import {render} from 'react-dom';
import './index.css';
import App from './App';
import UserAuthContextProvider from "./components/Contexts/UserAuthContext.js";
render(
<React.StrictMode>
<UserAuthContextProvider><App /></UserAuthContextProvider>
</React.StrictMode>,
document.getElementById('root')
);
I'm getting an error when trying to render react-router as a shared component (and have any idea why it isn't working but wanted to confirm.)
I wanted to make a shared NavBar for two similar react apps using create-react-app. When I pull out the component with a <Link> element into a shared component I get the Invariant error because it can't see that I'm calling it within <BrowserRouter>
My thought is you can't have any shared components that use react-router because they need to see in the same directory that <BrowserRouter> is available? Is that the case (or is there a way to fix this and I'm doing it wrong).
Help appreciated!
My index.ts in (app/src)
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
my App.tsx (in app/src)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NavBar from '../../common/src/NavBar/NavBar'; // this only works if it's ./NavBar/NavBar in same src directory
import Footer from '../../common/src/Footer/Footer'
class App extends Component {
render() {
return (
<div>
<NavBar/>
<p>Work in progress.</p>
<Footer/>
</div>
);
}
}
export default App;
my NavBar.tsx (in common/src and transpile with react-app-rewired and removeModuleScopePlugin(), or compiled and in common/lib as NavBar.js and imported - I get the same error both ways)
import React from 'react';
import { Link } from 'react-router-dom';
function NavBar() {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
Logo
</Link>
<div>
description
</div>
</nav>
);
}
export default NavBar;
I am trying to add the react sticky header to my stepper.
but the problem is if I add inside my App.js its not rendering.
so I started debugging the App.js code.
if I give console inside my render method of App.js its not displaying console.log("App---->");
right now I am getting Cannot read property 'getState' of undefined error
can you tell me how to fix it.
so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/6zv5n0ro9z
App.js
import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...
class App extends React.Component {
render() {
console.log("App---->");
return (
<StickyContainer>
{/* Other elements can be in between `StickyContainer` and `Sticky`,
but certain styles can break the positioning logic used. */}
<Sticky>
{({
style,
// the following are also available but unused in this example
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => <header style={style}>{/* ... */}</header>}
</Sticky>
{/* ... */}
</StickyContainer>
);
}
}
index.js
import React from "react";
//import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { logger } from "redux-logger";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
//import reducer from "./reducers";
import thunk from "redux-thunk";
//const store = createStore(reducer, applyMiddleware(thunk, logger));
//ReactDOM.render(<Demo />, document.querySelector("#root"));
render(
// <Provider store={store}>
<Provider>
<App />
</Provider>,
document.getElementById("root")
);
You need to either pass a store to the Provider as Mark suggests, or if you have simplified your example to the point of not needing it, then remove the Provider element entirely so you are just rendering the App element. The current stack trace shows that the error is in Provider.
You also need to add:
export default App;
to the bottom of App.js.
You need to pass your store as props to the wrapping Provider
render(<Provider store={store} >
<App />
</Provider>,document.getElementById("root"));
If you're going to render a React-Redux <Provider>, you must create a Redux store and pass it as a prop named store. I see you've got those lines in there - you should uncomment them.
Chances are that you would have not set the store property correctly.
Make sure that store is imported this way.
import store from './store';
and not the below way
import {store} from './store';
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
import store from './store';
Running code should look like below
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
enter code here
For anyone else stumbling on this, try to pull your <Provider> up a level and make use of your getters from a child.
Make sure you have imported import store from './redux/store' and pasing provider as <Provider store={store}> here I am emphasizing on `store' file and import must be small letter must not be camel or uppercase. This is what i have found during redux learning.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();