Invalid hook call [very beginner question] | TypeScript Community | Page 1

grand sentinel Sep 19, 2024, 1:30 PM

#

Hi, I am learning to code in typescript with react. I have no background in this domain, I am coming from python programming in robotics. I am sure this is a really easy solve, but I am simply lost, there's a lot of new stuff here 😅

With this in mind, I was trying to developp a user interface to control a simulation. I am at the very early stage of setting up the menu. I wanted to use tabs for this. My goal was that each tab would redirect to another page, in order to make code more separate and clean, but I'm having trouble using hooks with router.

My TabMenu.tsx files looks like this:

import { useState } from "react";
import { useNavigate } from "react-router-dom";

interface TopMenuProps {
  tabName: string[];
}

var navigate = useNavigate();

const routeChange = (item: string) => {
  let path: string;
  if (item === "Home") {
    path = "page";
  } else {
    path = "./" + item + "/page";
  }
  navigate(path);
};

const TopMenu = ({ tabName }: TopMenuProps) => {
  const [selectedMenu, setSelectedMenu] = useState(-1);
  return (
    <div role="tablist" className="tabs tabs-lifted">
      {tabName.map((item, index) => (
        <a
          role="tab"
          className={
            selectedMenu === index
              ? "tab tab-active [--tab-bg:lightblue] [--tab-border-color:blue]"
              : "tab"
          }
          key={item}
          onClick={() => {
            setSelectedMenu(index);
            routeChange(item);
          }}
        >
          {item}
        </a>
      ))}
    </div>
  );
};
export default TopMenu;

And my main page.tsx looks like this

"use client";
import TopMenu from "./components/TopMenu";
import React, { useState } from "react";

var menu = ["Home", "Simulation", "Parameter"];

function App() {
  return (
    <div>
      <TopMenu tabName={menu} />
    </div>
  );
}

export default App;

I am using React with Next.js, using daisyUI

My error is shown in the picture.

shrewd plover Sep 19, 2024, 1:31 PM

#

you're just misusing hooks

grand sentinel Sep 19, 2024, 1:31 PM

#

From what i've read in the link, I don't think my hook's usage is wrong, but rather, it has to do with duplicate of Reacts. Running npm ls react gives me this, I am guessing this is the issue, but I'm not sure, and I'm not sure why, as I didn't install random stuff

#

Oh

shrewd plover Sep 19, 2024, 1:31 PM

#

hooks can only be called within components or other hooks

#

they're contextual and dynamic, so it doesn't make sense to use them at the top level

#

you'll probably want to move both navigate and routeChange inside TopMenu

#

also,

#

!:var

placid isleBOT Sep 19, 2024, 1:32 PM

#

that_guy977#0

`!that_guy977:var`:

Don't use var in modern JS/TS applications! Its function scoping can lead to unexpected behavior. It is superceded by the block-scoped const and let. Read more

shrewd plover Sep 19, 2024, 1:32 PM

#

use const here instead (for both navigate and menu)

grand sentinel Sep 19, 2024, 1:33 PM

#

import { useState } from "react";
import { useNavigate } from "react-router-dom";

interface TopMenuProps {
  tabName: string[];
}

const TopMenu = ({ tabName }: TopMenuProps) => {
  const navigate = useNavigate();

  const routeChange = (item: string) => {
    let path: string;
    if (item === "Home") {
      path = "page";
    } else {
      path = "./" + item + "/page";
    }
    navigate(path);
  };
  const [selectedMenu, setSelectedMenu] = useState(-1);
  return (
    <div role="tablist" className="tabs tabs-lifted">
      {tabName.map((item, index) => (
        <a
          role="tab"
          className={
            selectedMenu === index
              ? "tab tab-active [--tab-bg:lightblue] [--tab-border-color:blue]"
              : "tab"
          }
          key={item}
          onClick={() => {
            setSelectedMenu(index);
            routeChange(item);
          }}
        >
          {item}
        </a>
      ))}
    </div>
  );
};
export default TopMenu;

You mean like this ?

shrewd plover Sep 19, 2024, 1:34 PM

#

grand sentinel From what i've read in the link, I don't think my hook's usage is wrong, but rat...

deduped just means many packages are referencing the same package, and the duplicates were removed (hence, de-dup(licate))

#

they're all the same copy of react

grand sentinel Sep 19, 2024, 1:34 PM

#

Okay, thanks for the clarification !

shrewd plover Sep 19, 2024, 1:34 PM

#

if you had [email protected] somewhere and [email protected] somewhere else in the same project, that would be an issue

#

or if react and react-dom had different versions, though that's specific to react's usage

shrewd plover Sep 19, 2024, 1:35 PM

#

grand sentinel ```import React from "react"; import { useState } from "react"; import { useNavi...

try it!

grand sentinel Sep 19, 2024, 1:35 PM

#

Thanks!
i've moved the hooks as shown in the code above, but it still doesn't work. Now I get

shrewd plover Sep 19, 2024, 1:36 PM

#

ok, so useNavigate is from react-router-dom, but it doesn't handle navigation itself fully
it works with a Router (provided by the same package) to handle the navigation and render correctly

#

TopMenu would have to be inside a Router
there can be intermediate components, but it has to have a Router somewhere in its parent chain

#

you'll probably want the Router to encapsulate basically the rest of the app, the parts that are affected by routing/navigation (perhaps excluding headers or footers, that's up to your design)

#

check react-router-dom docs

grand sentinel Sep 19, 2024, 1:38 PM

#

so <Router></Router> at the top level of the return of my App ?

shrewd plover Sep 19, 2024, 1:38 PM

#

sure, make sure to configure it though

grand sentinel Sep 19, 2024, 1:39 PM

#

Ill take a look,
Also, Do i need to import it in everyfile that uses the Router? Or is there a way to import only once

shrewd plover Sep 19, 2024, 1:39 PM

#

navigate tells the Router where to go
but you have to define to the Router what it should do for each path

shrewd plover Sep 19, 2024, 1:39 PM

#

grand sentinel Ill take a look, Also, Do i need to import it in everyfile that uses the Router...

what do you mean by "it", useNavigate?

grand sentinel Sep 19, 2024, 1:40 PM

#

Sorry, I meant Router.
I am looking at this https://www.pluralsight.com/resources/blog/guides/react-router-typescript
and to use <Router> I apparently need to import it too

How to Use React Router in Typescript

shrewd plover Sep 19, 2024, 1:40 PM

#

yeah you have to define the stuff you're using

grand sentinel Sep 19, 2024, 1:40 PM

#

but if I don't in my other files, there's an error, and I'm wondering if there's an easy and clean way of importing it once, or if I should import it in every file that uses it

shrewd plover Sep 19, 2024, 1:40 PM

#

using global stuff is possible, but it makes code harder to understand as it gets more complex

grand sentinel Sep 19, 2024, 1:41 PM

#

okay thanks, ill import it everywhere then

shrewd plover Sep 19, 2024, 1:41 PM

#

you shouldn't have many files with Routers though

#

1 for most uses, <4 if you want to get granular, i suppose

#

but from what you've shown, it's not super complex, so you should only need 1 Router

#

other files won't need to reference Router since they don't use it directly

grand sentinel Sep 19, 2024, 1:42 PM

#

I have it 3 times, one for home, one for parameter and one for simulation, as they are all their own page.tsx

shrewd plover Sep 19, 2024, 1:43 PM

#

do you have extra pages under each of those?

grand sentinel Sep 19, 2024, 1:43 PM

#

Also, I am a bit confused, you mentionned the fact I need to configure my Route. I don't think I've done it, outside of the const routeChange, yet it works. Was this what you meant, or were you talking about something else?

#

not for now, no

#

only these 3

shrewd plover Sep 19, 2024, 1:44 PM

#

then you only need 1 Router

#

the Router selects between those 3 pages

grand sentinel Sep 19, 2024, 1:44 PM

#

Hmmm, maybe I didn't implement this correctly then 😅

#

import TopMenu from "../components/TopMenu";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

var menu = ["Home", "Simulation", "Parameter"];
const Parameter = (name: string) => {
  return (
    <div>
      <Router>
        <TopMenu tabName={menu} />
      </Router>
      {name}
    </div>
  );
};

export default Parameter;
```is my `/Parameter/page.tsx`, for instance. The simulation is the same, except for the name, and you already saw the main` page.tsx`

shrewd plover Sep 19, 2024, 1:45 PM

#

yeah that's a lot of code duplication

#

you're calling TopMenu in each, you're defining menu again in each, that can lead to mismatches if you forget to update one of them

grand sentinel Sep 19, 2024, 1:46 PM

#

I agree, but I figured I needed the menu to be in all 3 pages if I wanted a way to come back

shrewd plover Sep 19, 2024, 1:46 PM

#

but they don't need to be defined in each page separately

#

put Router and TopMenu in the entry point instead, presumably App?

#

the Router and TopMenu aren't part of each page specifically, they're part of the App, so they should be called in the App

#

then you can define routes in the Router to say what slug corresponds to what component (each page)

grand sentinel Sep 19, 2024, 1:47 PM

#

And they will stay visible regardless of what page I am on ?

shrewd plover Sep 19, 2024, 1:47 PM

#

yeah

grand sentinel Sep 19, 2024, 1:48 PM

#

hmmm okay, let me try

#

Okay it works, I don't understand hahaa, I thought the main page.tsx was just like a webpage in its own, but apparently not?

#

Also, apparently, if I let is sit idle for a bit, I get error 404, this page could not be found, Maybe my routes aren't 100% good?

shrewd plover Sep 19, 2024, 1:56 PM

#

well, that's not good

#

no clue why thatd happen without any input

shrewd plover Sep 19, 2024, 1:56 PM

#

grand sentinel Okay it works, I don't understand hahaa, I thought the main page.tsx was just li...

nope, everything is composed together

grand sentinel Sep 19, 2024, 2:00 PM

#

Also, if it helps, here is my folder architecture

#

I am actually starting to believe it doesn't work, because it doesn't render the content of the pages

#

Yeah okay, I can access the localhost:3000/home, but if I use the code, it puts this in the adress, and keeps the main App. If I go manually there, I can see its content, but not the top menu

shrewd plover Sep 19, 2024, 2:29 PM

#

you might be linking your pages wrong, what does your entry point look like

grand sentinel Sep 19, 2024, 2:38 PM

#

import TopMenu from "./components/TopMenu";
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";

var menu = ["home", "simulation", "parameter"];

function App() {
  return (
    <div>
      <Router>
        <TopMenu tabName={menu} />
      </Router>
    </div>
  );
}

export default App;

shrewd plover Sep 19, 2024, 2:49 PM

#

you haven't configured the router, you need to pass Routes to define path => component relations

#

also you don't need that div layer

grand sentinel Sep 20, 2024, 6:19 AM

#

I am terribly sorry, I ha to leave.
Thanks for the answers. Can I ask you for clarifications ? I am looking at this ,
Here, they make the parent route the path / with Layout
I am guessing this is the file where the main layout is locate. But in my case, Should I move my main layout(so the tabMenu) there, should I write simply TabMenu instead, or should I do something else?

#

Currently, I have ```typescript
"use client";
import TopMenu from "./components/TopMenu";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./Home/page";
import Simulation from "./Simulation/page";
import Parameter from "./Parameter/page";

var menu = ["home", "simulation", "parameter"];

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<TopMenu tabName={menu} />}>
<Route path="/home" element={<Home />} />
<Route path="/simulation" element={<Simulation />} />
<Route path="/parameter" element={<Parameter />} />
</Route>
</Routes>
</BrowserRouter>
);
}

export default App

#

#

My other files are simply like this:
/app/parameters/page.tsx

import React from "react";

const Parameter = (name: string) => {
  return (
    <div>
      TEST
      {name}
    </div>
  );
};

export default Parameter;

shrewd plover Sep 20, 2024, 6:26 AM

#

i haven't worked with this in a while, but doesn't that only render TopMenu when the path is /?

grand sentinel Sep 20, 2024, 6:27 AM

#

Hmm I don't really know. When I press home, I get the correct render, let me show you

shrewd plover Sep 20, 2024, 6:27 AM

#

grand sentinel My other files are simply like this: /app/parameters/page.tsx ```typescript impo...

uhh that should be valid jsx, not sure what's up with that

grand sentinel Sep 20, 2024, 6:28 AM

#

#

Also, I dont have the last two lines that are in the links, so const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); I tried including them, but I get an error on the first line

#

And maybe that helps, but my TopMenu Is slightly different from the example,a s I don't use Link

import React from "react";
import { useState } from "react";
import { useNavigate, Outlet } from "react-router-dom";

interface TopMenuProps {
  tabName: string[];
}

const TopMenu = ({ tabName }: TopMenuProps) => {
  const navigate = useNavigate();

  const routeChange = (item: string) => {
    navigate("./" + item);
  };

  const [selectedMenu, setSelectedMenu] = useState(-1);
  return (
    <div role="tablist" className="tabs tabs-lifted">
      {tabName.map((item, index) => (
        <a
          role="tab"
          className={
            selectedMenu === index
              ? "tab tab-active [--tab-bg:lightblue] [--tab-border-color:blue]"
              : "tab"
          }
          key={item}
          onClick={() => {
            setSelectedMenu(index);
            routeChange(item);
          }}
        >
          {item}
        </a>
      ))}
      <Outlet />
    </div>
  );
};

export default TopMenu;

#

Ah, I found the issue ! I had forgotten than in my functions, I had a variable name name:string which i didn't submit. I removed it and now it works

#

I want to say, thank you so much. Coming from python and c++ from a long time ago, the transition is really hard, and you really helped me a lot, I truly appreciate it! Thank you for spending some time helping me 🫶

#

I want to ask one final little question before I close this post: apparently passing arguments inside a Route is slightly different, and I'm not sure I understand

#

For instance typescript <Route path="/" element={<TopMenu tabName={menu} />}> Seem to work perfectly fine
However,

<Route path="/parameter" element={<Parameter name={"test"} />} />```
doesn't. Do you know why? I've tried with and without brackets

shrewd plover Sep 20, 2024, 6:46 AM

#

how doesn't it work exactly?

#

make sure you're destructuring name from props, and not accepting it as a parameter directly

shrewd plover Sep 20, 2024, 6:46 AM

#

grand sentinel My other files are simply like this: /app/parameters/page.tsx ```typescript impo...

that's what the issue was here, i didn't notice at first

grand sentinel Sep 20, 2024, 6:47 AM

#

Can you explain why I need to destructure it? I am passing a string, and expect a string on the other end, it feels redundant to destructure a string into a string, isn't it?

shrewd plover Sep 20, 2024, 6:49 AM

#

you don't get a string on the other end, you get an object

#

otherwise you wouldn't be giving a name to the parameter

#

if you didn't get an object, you could have bugs like this

function C(x: string, y: number) {}
<C y={0}, x="" /> // swap!
```because js doesn't have named parameters, all parameters are positional

#

so jsx puts the parameters into an object, where order doesn't matter, names do

grand sentinel Sep 20, 2024, 6:51 AM

#

Okay, thanks a lot ! That makes much more sense

#

I have a few other minor issues, but I'll try to tackle them on my own. Is it okay if I let this post open until I resolve them, in case I cannot find the answer?

shrewd plover Sep 20, 2024, 6:53 AM

#

sure, but if they're not really related a new thread may work better

grand sentinel Sep 20, 2024, 6:55 AM

#

It's still regarding that top menu's behavior. It's kind of the same topic as the last few messages, but not the original message I guess

#

For example: If I manually enter http://localhost:3000/parameter, the topMenu doesn't render, Or I would like to make home the default route. I managed to do that, but the tab isn't highlighted. These are the issue I'm looking at

shrewd plover Sep 20, 2024, 6:57 AM

#

shrewd plover i haven't worked with this in a while, but doesn't that only render `TopMenu` wh...

well that may be because of this

#

you'd want TopMenu outside of Routes

grand sentinel Sep 20, 2024, 7:00 AM

#

But I thought The Route that encapsulates everything was the parent and would apply everywhere.
In that case, would you still have a Parent Route, or would it be outside Routes

shrewd plover Sep 20, 2024, 7:01 AM

#

the Route encapsulates the part that's primarily affected by the route

grand sentinel Sep 20, 2024, 7:02 AM

#

So I've tried this ```typescript
function App() {
return (
<BrowserRouter>
<TopMenu tabName={menu} />
<Routes>
<Route path="/">
<Route index element={<Home />} /> {/* Default Route */}
<Route path="/home" element={<Home />} />
<Route path="/parameter" element={<Parameter name="test" />} />
<Route path="/simulation" element={<Simulation />} />
</Route>
</Routes>
</BrowserRouter>
);
}


Still behaves the same

grand sentinel Sep 20, 2024, 7:24 AM

#

I'm checking with chatGPT, and the issue could be the entry point. In a tutorial I was looking at, there was a main.tsx, but the guy was using React with Vite. I am using React with Next.js, and couldn't find the main.tsx or index.tsx. Could that be it? I am misusing the entry point?
I have gone with the assimption it was simply app/page.tsx