I have little issue I face the first time. I'm trying to use a simple useState but for some reason I can't understand why React throws me back an error and whatever I'm trying to do-nothing fix it.

that's the image of the error: error description:

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

my code:(very simple)

import React, {useState} from "react";

function Login() {
    const [user, setUser] = useState({});


  return <div> why error? </div>;
}
export default Login;

I have little issue I face the first time. I'm trying to use a simple useState but for some reason I can't understand why React throws me back an error and whatever I'm trying to do-nothing fix it.

that's the image of the error: error description:

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

my code:(very simple)

import React, {useState} from "react";

function Login() {
    const [user, setUser] = useState({});


  return <div> why error? </div>;
}
export default Login;

Tried following their solution with no luck of succeeding... thanks

EDIT: this is where I render the ponent -

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./ponents/Home";
import Contact from "./ponents/Contact";
import Login from "./ponents/Login";
import Register from "./ponents/Register";
import NotFound from "./ponents/NotFound";
import Navbar from "./ponents/Navbar";
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <Route path="/" exact render={Home} />
          <Route path="/contact" exact ponent={Contact} />
          <Route path="/login" exact render={Login} />
          <Route path="/register" exact render={Register} />
          <Route render={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}
...

• javascript
• reactjs
• react-router
• react-hooks

• Maybe this link can help : reactjs/warnings/invalid-hook-call-warning.html – Deepak Commented Nov 12, 2019 at 20:18
• Where are you actually rendering the ponent? – Colin Ricardo Commented Nov 12, 2019 at 20:21
• tried it.. didn't help – rio Commented Nov 12, 2019 at 20:21
• I tried to reproduce and i dont get your error. it works for me – jstuartmilne Commented Nov 12, 2019 at 20:21
• Check Colins answer, I tried what he says and could reproduce your error – jstuartmilne Commented Nov 12, 2019 at 20:25

2 Answers 2

The issue here is how you're rendering your ponent. You can't do:

Login()

but you can do:

<Login />

Update: similarly, you can't do:

<Route path="/login" exact render={Login} />

you need:

<Route path="/login" exact render={() => <Login />} />

The function itself has no errors. Tried this in another ponent in a different file. Check for errors elsewhere. What were the other 40 lines in the code?

And what's the version of React?