Eu tenho um formulário que possui um botão de envio. Esse formulário chama uma função onclick que define o estado de algo de falso para verdadeiro. Desejo então passar esse estado de volta para o pai, para que, se for verdade, renderize componentA, mas se for falso, renderize componentB.

Como eu faria isso em reagir? Eu sei que preciso usar estado ou adereços, mas não sei como fazê-lo. isso também contradiz o princípio de reação de fluxo unidirecional?

Código ComponentA:

<form onSubmit={this.handleClick}>


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

Componente pai que controla o que é exibido:

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