Отображение компонента реакции при нажатии

Я попытался найти это в Google и найти переполнение стека, но ни один из них, похоже, не помог с моим решением. Пытаюсь настроить две кнопки. При щелчке по каждому из них я хочу, чтобы он отображал соответствующий компонент. Вот что я сейчас делаю, чтобы изменить состояние.

import React, { Component } from 'react';
import Structured from '../Structured/Structured';
import YC from '../YC/YC';

class Home extends Component {
constructor() {
  super();
  this.state = {
    YC: false,
    Structured: false
  }
}

ycClick() {
    this.setState({
      YC: true,
      Structured: false
    });
  }


structuredClick() {
    this.setState({
      Structured: true,
      YC: false
    });
  }


render() {
  const { isSignedIn, route } = this.state;
  return (
    <div>
    <h1>Rick's Notes</h1>
    <div class = "ph3">
        <a class = "f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href = "#0" onClick = {this.ycClick}>YC vs. Non. YC</a>
        {this.state.YC ? <YC /> : null}
        <a class = "f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href = "#0" onClick = {this.structuredClick}>Structured Note Descriptions</a>
        {this.state.Structured ? <Structured /> : null}
    </div>
    </div>
  );
}
}

export default Home;

Я пытаюсь сделать так, чтобы при щелчке YC (или структурированном) было установлено значение true, и если this.state.yc истинно, он возвращает компонент. Однако он говорит, что это не определено, поэтому они должны быть проблемой с тем, как я вызываю компонент. Спасибо за любую помощь. Дайте мне знать, если я еще что-нибудь скажу.