Оказание нового класса в реакции

Question

Я хочу показать способ рендеринга классов из-за события onclick. У меня есть страница входа в систему, как только пользователи завершают ее и нажимают кнопку "Отправить" (она также входит в систему), я хочу создать новое представление.

  class LoginPage extends React.Component{
       render() {

    return (
      <div id="container">
            <button onClick={() => this.refs.myref.myfunc()}>Click</button>
              <form onSubmit={this.handleClick}>
                <p><input type="text" id="playerName" value={this.props.nameValue} onChange={this.handleNameChange} /></p>
                <p><input type="email" id="playerEmail"  value={this.props.emailValue} onChange={this.handleEmailChange}/></p>
                <p><input type="submit" value="submit" /></p>
              </form>
            </div>
    )
  }
 }

    class HomePage extends React.Component{
    //does things
    render() {
        return (
          <div>
            <h1 className="headings" id="heading"> Home Page </h1>
          </div>
        )
      }
  }

Как я могу отобразить заголовок главной страницы вместо формы. Раньше у меня был какой-то код, который переключал бы его в зависимости от состояния, но сейчас я пытаюсь разбить его на компоненты и установить состояние только в одном месте. handleClick Раньше функция обновляла состояние, но теперь ничего не делает, но я хочу, чтобы он каким-то образом вызывал метод рендеринга внутри компонента домашней страницы или передавал состояние / пропуски. как реагировать на это? могу уточнить, если вещи не имеют смысла