Tengo un formulario que tiene un botón de enviar. Esa forma llama a una función onclick que establece el estado de algo de falso a verdadero. Luego quiero pasar este estado de nuevo al padre para que, si es verdadero, represente el componente A, pero si es falso, representa el componente B.

¿Cómo haría eso en reaccionar? Sé que necesito usar estado o accesorios, pero no estoy seguro de cómo hacerlo. ¿Esto también contradice el principio de reacción de flujo unidireccional?

Componente Un código:

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

Componente principal que controla lo que muestra:

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )