Alternar mostrando e ocultando componentes no ReactJs

Tenho lutado para mostrar / ocultar componentes no ReactJs por alguns dias. Estou tentando mostrar o ("Write (blocks)" - que precisa ser oculto da exibição por padrão) e mostrado quando os links "edit" são clicados (ao alternar ocultar / mostrar os blocos "Read") e ocultá-los quando os botões "salvar" ou "cancelar" forem clicados, cuidarei da função salvar mais tarde. Por enquanto, estou apenas tentando mostrar / ocultar o componente com base nisso.

Abaixo está o meu código:

class ProfileSettings extends React.Component {

  render() {
    return (
      <div className="ProfileSettings">

        <SettingsBlock className="Names" label="Name" link="name">
          <p className="readOnlySettingField ReadNames">Hilal Agil<a href="#">Edit</a></p>

          <div className="WriteNames">
            <SubBlock label="First Name" placeholder="First Name" />
            <SubBlock label="Middle Name" placeholder="Middle Name" />
            <SubBlock label="Last Name" placeholder="Last Name" />
            <p className="notice"><strong>Please note:</strong> You wont be able to change your name within the next 30 days. 
            Make sure not to add any unusual capitalization, punctuation, characters or random words.</p>
            <button className="button small fill primary">Save Changes</button>
            <button className="button small default">Cancel</button>
          </div>
        </SettingsBlock>

        <SettingsBlock label="Username" link="username">

          <p className="readOnlySettingField ReadUsername">www.squelo.com/hilarl<a href="#">Edit</a></p>

          <div className="WriteUsername">
            <p className="notice url">squelo.com/hilarl</p>
            <Input placeholder="Username" classes="col-md-7" />
            <p className="notice"><strong>Please note:</strong> Your username can only be changed once and should include your authentic name.</p>
            <button className="button small fill primary">Save Changes</button>
            <button className="button small default">Cancel</button>
          </div>
        </SettingsBlock>

        <SettingsBlock label="Email" link="email">
          <p className="readOnlySettingField ReadEmail">[email protected]<a href="#">Edit</a></p>

          <div className="WriteEmail">
            <Input placeholder="Email" classes="col-md-9" />
            <p className="notice"><strong>Please note:</strong> Your username can only be changed once and should include your authentic name.</p>
            <button className="button small fill primary">Save Changes</button>
            <button className="button small default">Cancel</button>
          </div>
        </SettingsBlock>

        <SettingsBlock className="Password" label="Password" link="password">
          <p className="readOnlySettingField ReadPassword">Password last changed over a year ago<a href="#">Edit</a></p>

          <div className="WritePassword">
            <SubBlock label="Current" placeholder="Current" />
            <SubBlock label="New" placeholder="New" />
            <SubBlock label="Re-type new" placeholder="Re-type new" />
            <p className="notice"><a href="#">Forgot password?</a></p>
            <button className="button small fill primary">Save Changes</button>
            <button className="button small default">Cancel</button>
          </div>
        </SettingsBlock>
      </div>
    );
  }

}

Seria ótimo se alguém pudesse dar um exemplo de como conseguir isso nessa situação. Eu tenho perdido muito tempo tentando descobrir isso sozinho e é a primeira vez que estou usando o ReactJs em um projeto. Obrigado.

questionAnswers(1)

yourAnswerToTheQuestion