Code of Login Component:
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
const Login=()=>{
return (
<Grid>
<Paper>
Sign in
</Paper>
</Grid>
)
}
export default Login
Code for App.js
import './App.css';
import Login from './components/Login';
function App() {
return (
<div className="App">
<Login></Login>
</div>
);
}
export default App;
Code for app.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
There's no problem with your code try restart your server it will solve the issue. I am attaching a code sandbox link where you can see it running fine.
Do one thing which is recommended change your app.js to index.js
https://codesandbox.io/s/exciting-thompson-u1rxk?file=/src/index.js
Related
This question already has answers here:
Why useEffect running twice and how to handle it well in React?
(2 answers)
React Hooks render twice
(5 answers)
Closed 5 months ago.
Why is this duplicating in the console? I noticed this while working on another projects and noticed the amount of HTML elements I was adding using jQuery was twice as much as expected (building a notification framework). I tried recreating the problem in a new project and the behavior persisted
DupeMountTest.js:
import React, {Component, useEffect} from "react";
const DupeMountTest = () => {
useEffect(() => {
console.log("useEffect")
}, [])
return (
<div>
<p>Test</p>
</div>
)
}
export default DupeMountTest
App.js:
import {
BrowserRouter as Router,
Route, Routes,
} from "react-router-dom";
import DupeMountTest from "./DupeMountTest";
function App() {
return (
<Router>
<div className="App">
<Routes>
<Route path={"/"} exact element={<DupeMountTest/>}/>
</Routes>
</div>
</Router>
);
}
export default App
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Console:
I also attempted this using a class component but "Mounted" also logged twice.
DupeMountTest using class component:
import React, {Component, useEffect} from "react";
class DupeMountTest extends Component {
componentDidMount() {
console.log("Mounted")
}
render() {
return (
<div>
<p>Test</p>
</div>
)
}
}
export default DupeMountTest
Answer provided by evolutionxbox inside the comments section. Problem solved by removing <React.StrictMode> in index.js:
Updated index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode>
//
// </React.StrictMode>
<App />
);
React 18 introduces a new development-only check to Strict Mode. This
new check will automatically unmount and remount every component,
whenever a component mounts for the first time, restoring the previous
state on the second mount.
https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors
So, your useEffect is running twice on each mount.
This was put in place to lay the groundwork for future features, so it's not exactly a bad thing.
In the future, we’d like to add a feature that allows React to add and
remove sections of the UI while preserving state. For example, when a
user tabs away from a screen and back, React should be able to
immediately show the previous screen. To do this, React would unmount
and remount trees using the same component state as before.
This feature will give React apps better performance out-of-the-box,
but requires components to be resilient to effects being mounted and
destroyed multiple times. Most effects will work without any changes,
but some effects assume they are only mounted or destroyed once.
It's also discussed in this post (thanks #evolutionxbox):
React Hooks render twice
I really liked a comment there that basically summed up the answer to what you're wondering about:
"it's a feature, not a bug."
that the image what is going on when i run the react file> this is my app.js file
I m trying to create an app every time I got a page unresponsive in my browser
import './App.css';
function App() {
return (
<div className="App">
<h1>Hiii</h1>
</div>
);
}
export default App;
this is the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I initialised a React project with TypeScript using the CLI command create-react-app client --typescript. Then, I ran npm start but received the following compilation error:
./src/App.js
Line 26:13: 'React' must be in scope when using JSX react/react-in-jsx-scope
I did not even modify the boilerplate project provided by create-react-app other than removing unnecessary logo files, and my previous React apps done using TypeScript compiled just fine. Below is my App.tsx and index.tsx file: (note that the logo in App.tsx was removed, and I did not touch index.tsx)
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
App.tsx:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
Lorem
</div>
);
}
export default App;
React and ReactDOM are imported, so what caused this error?
Edit:
I found out that npm start, which runs react-scripts start, is compiling my .tsx files into .js files, which probably caused this issue. What might have caused the above behaviour?
try
const RootApp:React.FC = () => {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}
render(<RootApp />, document.getElementById("root"));
When attempting to use the AppBar in version 0.16.6 of Material UI, I get the following error
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
which looks like a react conflict error.
My code is as follows:
App.js
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import {deepOrange500} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar/>
</MuiThemeProvider>
);
}
}
export default App;
index.js
import injectTapEventPlugin from 'react-tap-event-plugin';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Has anyone encountered this, or does anyone know how to fix the problem?
In the index.js file you will need this before the ReactDOM.render call:
// Needed for onTouchTap event handling
injectTapEventPlugin();
See if that clears up the issue. If not, then try deleting the node_modules folder and running npm install again.
Learning ReactJS with ES6. Trying to implement React-Bootstrap components. I am also using the react router. I am trying to implement the Navbar component.
It will just be a nabber with the brand and a search box. I aim to expand and use the search box component a lot more so I have put it in its own separate component below.
LocationSearchBox.js
import React, {PropTypes} from 'react'
import Form, {FormGroup, FormControl} from 'react-bootstrap'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit">Submit</Button>
</FormGroup>
)
}
The navber will be on all pages so I have put it in the topmost route and its component is the Main.js file shown below along with routes.js to manage client side routes.
import React, {Component} from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
export default class Main extends Component{
constructor(props) {
super(props);
this.props = props;
}
render() {
return(
<Navbar>
<NavbarHeader>
<NavbarBrand>
React-Bootstrap
</NavbarBrand>
</NavbarHeader>
<NavbarCollapse>
<Search/>
</NavbarCollapse>
</Navbar>
)
}
}
routes.js
import React from 'react';
import ReactRouter, {Router, Route, IndexRoute, browserHistory} from 'react-router';
import Main from '../components/Main';
export var routes = (
<Router history={browserHistory}>
<Route path='/' component={Main} />
</Router>
);
Index.js is below and is the entry file to use in Webpack/babel
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';
ReactDOM.render(routes, document.getElementById('root'));
So when i run web pack-dev-server, go to localhost:8080 as the default port the main route should be hitting. I believe it does but I get errors, namely 3 of the same kind.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Main`.
I believe it might be due to the way I am importing the Navbar components in Main.js, such as NavbarHeader, NavbarCollapse etc but that is a guess. I would really appreciate any help in solving this issue, thank you.
You are using the Button component without importing it:
<Button bsStyle="success" type="submit">Submit</Button>
Import it correctly and the issue should be resolved.