Check if user is logged in with React + other React best practices

react
1

Hey all.
Been searching all day for a proper way to check if the user is logged in.
I’m trying to show “Login/Register” buttons in navbar if the user is not logged in, and “Logout” if the user is logged in.

Very simple stuff, extremely easy with Blaze, but I’m new to React so this is thoroughly confusing.

I’ve found an old source on this -

Now it seems to work (and is suggested by sashko at the time) but I’ve heard that mixins are “dead” in the React infrastructure, so I’m wary to move forward with that suggestion.

Here’s a snippet of my component code (very basic component setup) -

export default class Navbar extends TrackerReact(React.Component) {
  render() {
    return (
      <div>
        <nav>
         <div className="nav-wrapper">
           <a href="/" className="brand-logo">EST8.io</a>
           <ul id="nav-mobile" className="right hide-on-med-and-down">
             <li><a href="/tasks">Tasks</a></li>
             <li><a href="/notes">Notes</a></li>
             <li><a href="#">Calendar</a></li>
             <li>{<loginUser />}</li>
           </ul>
         </div>
        </nav>
      </div>
    )
  }
}

I know I can’t use if-else statements within JSX, and can’t wrap my head around React’s structure fully. Do I place an if-else statement before render() { — or before the component declaration completely?

On this note as well, I’m using TrackerReact and I’ve heard mixed opinions on this. As I’m at the beginning of a React app, I still have time to switch - which is the preferred method for getting reactive data? The Meteor guide outlines a few methods that I will have to look into.

Sorry if this sounds messy, I’m just trying to get a good structure for this app!

Thanks again.

2 Likes