Clear DOM element after updating state in React

Question

Hello I am trying to implement an auth logic to my page. The issue I am having, after updating the state of my page, it doesn't remove the authenticated stuffs. How, do I clear the elements?

I am trying to use a ternary operator, it does work. However it doesn't update when the user login or logout. It only renders one time, and it just sits there afterwards.

header.js

import React, { Component } from 'react';

import LoginHeader from './auth_logic/login_header';
import PublicHeader from './auth_logic/public_header';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {isAuth: false};
  }

  render() {
    if (Meteor.userId) {
      this.setState({isAuth: !this.state.isAuth});
    }
    else {
      this.setState({isAuth: !this.state.isAuth});
    }

    return (
      <div>
        {this.state.isAuth ? <PublicHeader /> : <LoginHeader />}
      </div>
    );
  }
}

Here is my LoginHeader, when the user is authenticated it will show additional information, and navigation authenticated links.

auth_logic/login_header.js

import React, { Component } from 'react';

import Accounts from '../accounts';

export default class LoginHeader extends Component {
  render() {
    return (
      <div className="nav navbar-default">
        <a className="navbar-brand">Nick Reviews</a>

        <ul className="nav navbar-nav">
          <li>
            <a href="#">
              To Watch
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <a href="#">
              Reviews
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <Accounts />
          </li>
          <li><a href="#"> Create new item </a></li>
        </ul>
      </div>
    );
  }
}

It is exactly the same as the login_header.js file, but with less information.

auth_logic/public_header.js

import React, { Component } from 'react';

import Accounts from '../accounts';

export default class PublicHeader extends Component {
  render() {
    return (
      <div className="nav navbar-default">
        <a className="navbar-brand">Nick Reviews</a>

        <ul className="nav navbar-nav">
          <li>
            <a href="#">
              To Watch
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <a href="#">
              Reviews
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <Accounts />
          </li>
        </ul>
      </div>
    );
  }
}

Answer 1

Assuming that your userId is a prop from above, use componentWillReceiveProps() react life cycle method to update your state depends on your props. for more info refer this link - https://reactjs.org/docs/react-component.html

Answer 2

标头组件不应在内部保持isAuth状态，它应来自容器组件，例如Home / About（Router Page）...根据prop更改呈现条件。