Переключить классы CSS с состоянием

В настоящее время я создаю с помощью React шаблон входа / регистрации, который по функциональности имитирует groupon логин. В частности, я нацелен на переключение цветной границы при переключении между i have an account и i'm a new customer. Шаблон очень распространен в сегодняшней разработке, и я видел много плохо написанных решений, которые полностью игнорируют лучшие практики.

Начну с утверждения, что лучшее решение использует state. Затем я бы создал следующее (очевидно, неполное):

<div className = "wrapper">
  <div className = "login" />
  <div className = "register" />
</div>

Затем я подумал дать обоим divs состояние и спецификацию border-bottom для рендеринга цветной границы. Проблема, которую я вижу, заключается в том, как лучше всего реализовать переключение того, какой из них активен.

Другой мысленный эксперимент - жестко закодировать все, вплоть до полей ввода. Затем, когда пользователь нажимает на поле I'M A NEW CUSTOMER, все, что мне нужно сделать, это установить активное состояние для этого компонента и выполнить рендеринг.

Опять же, суть этого вопроса состоит в том, чтобы ответить, как лучше всего реализовать эту форму входа / регистрации. Кстати, Groupon присваивает их показывающему компоненту класс active.

РЕДАКТИРОВАТЬ: Как было указано Санни Вонгом и отражает мое предположение, его решение использует состояние и реализует с моим компонентом следующим образом:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: "login"
    };
  }

  handleActiveTab = name => event => {
    this.setState({ activeTab: name });
  };

  render() {
    const { activeTab } = this.state;
    let joinComponent =
      activeTab === "login" ? <LoginComponent /> : <RegisterComponent />;

    return (
      <div className = "wrapper">
        <div
          onClick = {this.handleActiveTab("login")}
          className = {classNames("login", {
            active: activeTab === "login"
          })}
        >
          Login
        </div>
        <div
          onClick = {this.handleActiveTab("register")}
          className = {classNames("register", {
            active: activeTab === "register"
          })}
        >
          Register
        </div>
        {joinComponent}
      </div>
    );
  }
}

Кроме того, сообщение было помечено как too broad, но я ориентировался на конкретные темы / вопросы. Подводя итог, они были:

• Specifically, I am targeting the switching of the colored border when toggling between i have an account and i'm a new customer.

• answer how to best implement this login/registration form

Дополнительную информацию см. В живая версия.