Повторно визуализировать компонент при повторном щелчке по той же вкладке в другом компоненте

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

Я создаю приборную панель. У меня есть div панели навигации, который имеет несколько вкладок и div контента, который имеет соответствующий контент. Как только вкладка нажата, я визуализирую соответствующий контент. На любой вкладке пользователь может делать разные вещи / изменения. Допустим, у меня есть вкладка ABC, которая при нажатии создает начальное представление, когда я снова нажимаю эту вкладку, когда она уже нажата, мне нужно повторно отобразить содержимое вкладок ABC.

По сути, то, что я хочу сделать, - это когда после нажатия кнопки test и test-demo один раз пользователь снова нажимает кнопку test, текст «test-demo» должен исчезнуть.

import React, { Component } from 'react';

const Button = (props) => {
  return (
    <button onClick = {() => props.onClick(props.buttonName.trim())}>{props.buttonName}</button>
  );
};

class Test extends Component {

  static initialState = () => ({
    appContent:null,
  });
  state = Test.initialState();

  switchTab = (buttonKey) => {
    this.setState(prevState => ({
      appContent:<a>{buttonKey}</a>
    }));
  }

  render() {
    let appContent = null;
    switch(this.props.navigationTab) {
    case "test":
      appContent = <Button onClick = {this.switchTab} buttonName='test-demo' />    
      break;
    default:
      appContent = null     
      break;
    };
    return (
      <div>
        {appContent}
        {this.state.appContent}
      </div>
    );
  }
}

class AppContent extends Component {

  render() {
    return (
      <div>
        <Test navigationTab = {this.props.navigationTab}/>
      </div>
    );
  }
}

class App extends Component {
  static initialState = () => ({
    navigationTab:null,
  });
  state = App.initialState();

  switchTab = (buttonKey) => {
    this.setState(prevState => ({
      navigationTab:buttonKey,
    }));
  }
  render() {
    return (
      <div>
        <div>
          <Button onClick = {this.switchTab} buttonName='test'/>
        </div>
        <AppContent navigationTab = {this.state.navigationTab} />
      </div>
    );
  }
}

export default App;