CODEWITHSUNDEEP
reactjsmeteorreact-hooksmeteor-react
Syam Kumar
Syam Kumar

Reputation: 601

How to use React Hook userTracker in Meteor?

I am trying to implement Login/ Logout using Meteor React hooks. But getting the below error.

Login and logout functions are properly working. Any idea whats wrong with the below implementation ?

React version : 16.8.* plus Meteor-react-data : 2.0 * plus

Routes.jsx

import React, { Component } from "react";
// .... other imports 
import LoginForm from "/imports/ui/login/loginForm";
import LogOut from "/imports/ui/logout/logout";
 
export const renderRoutes = () => {

// below is the hook I am referring here
  
  const { user, isUserLoggedIn } = useTracker(() => {
    const user = Meteor.user();
    const userId = Meteor.userId();
    return {
      user,
      isUserLoggedIn: !!iuserId,
    };
  });

  return (
    <BrowserRouter>
      <div className="row">
        <div className="col-md-12">
          <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
            <Navbar.Brand href="#home">React Bootstrap Navbar</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link as={Link} to="/">
                  Home
                </Nav.Link>
                <Nav.Link as={Link} to="/city">
                  Events
                </Nav.Link>
                <Nav.Link as={Link} to="/place">
                  Clubs
                </Nav.Link>
            </Navbar.Collapse>
          </Navbar>
          <br />
        </div>
      </div>

      {isUserLoggedIn  ? (
        <div>
          <LogOut />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/city" component={City} />
            <Route exact path="/place" component={Place} />
            <Route component={NotFound} />
          </Switch>
        </div>
      ) : (
        <LoginForm />
      )}
    </BrowserRouter>
  );
};

Getting the below error.

Uncaught 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:
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

Upvotes: 0

Views: 1487

Answers (1)

Syam Kumar
Syam Kumar

Reputation: 601

When I exracted hooks out of BrowserRouter to a seperate file. It started working.


import { useTracker } from "meteor/react-meteor-data";
import LoginForm from "/imports/ui/login/loginForm";
import LogOut from "/imports/ui/logout/logout";

const Place = () => {
  const { user, isUserLoggedIn, userId, allUsers } = useTracker(() => {
    const user = Meteor.user();
    const userId = Meteor.userId();
    return {
      user,
      isUserLoggedIn: !!user,
      userId,
      allUsers: Meteor.users.find().fetch(),
    };
  });

  return (
    <div>
      <h2>This is where places stuff comes!</h2>
      <h1>Logged in user id is --> {Meteor.userId()} </h1>
      

      {isUserLoggedIn ? <LogOut /> : <LoginForm />}
    </div>
  );
};

export default Place;

Upvotes: 0

Related Questions