NewbieOnRails NewbieOnRails - 1 month ago 21
React JSX Question

Two different header components in React?

Just a quick question. I'm creating a React app which needs to have different rendition of a header. On the login page it's just the header with the logo (the form is a different component) and when the user is logged, that header gets and menu and logout button. Do I need two different headers/components or just one with conditional rendering?

Thanks.

Answer

You could create a wrapper component:

class LoginHeader extends React.Component {
  render() {
    return <div>I'm the login header!</div>
  }
}

class OtherHeader extends React.Component {
  render() {
    return <div>I'm the other header!</div>
  }
}

class Header extends React.Component {
  render() {
    return isLoggedIn() ? <OtherHeader /> : <LoginHeader />
  }
}

Code is nicely separated this way