Jak ustawić wspólny element H1 dla kilku sekcji, które pojawiają się i znikają przy naciskaniu buttonów.

Question

Witam, robię sobie stronę w React. Strona zawiera Buttony, każdy Button jest przydzielony do swojej sekcji (Button Skills do sekcji Skills itd). Buttony znajdują się po lewej stronie ekranu, główny content po prawej. Po kliknięciu w każdy Button, DOM się zmienia i wyświetlana jest sekcja w głównym contentcie, do której nazwa Buttona nas przekierowuje. Sekcje i Buttony to: Start, About, Skills, Projects oraz Contact. Chciałbym poprzez props albo state (nie wiem z czego skorzystać i to jest właśnie mój problem) klikając w Buttony About, Skills, Projects oraz Contact aby wyświetlany został element H1 właśnie z nazwami tych sekcji/buttonów a pod tym reszta część contentu każdej sekcji (sekcja Start, chcę żeby nie zawierała elementu H1). Prosiłbym o pomoc właśnie w tym problemie. Chciałem wrzucić to na strony typu codepen ale coś nie działa (nie wiem co, pewnie źle wrzucam, walczyłem ale przegrałem). 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import es6 from './img/es6.png';
import gul from './img/gulp.png';
import jq from './img/jquery.png';
import rea from './img/react.png';
import html5 from './img/html.png';
import css from './img/css.png';
import js from './img/js.png';
import sass from './img/sass.png';
import linked from './img/linked.png';
import cv from './img/cv.png';
import github from './img/git.png';
import mail from './img/mail.png';
import cvpdf from './img/CV.pdf';

class Contact extends Component {
  get show() {
    return this.props.activeSection === "contact";
  };

    render() {
      if(this.show) {

        return (
          <div className='contact'>
        <h1>kontakt!</h1>
          <a href='' target='_blank'>
            <img src={linked} />
          </a>
          <a href={cvpdf} target='_blank'>
            <img src={cv} />
          </a>
          <a href='' target='_blank'>
            <img src={github} />  
          </a>
          <a className="mailto" href="">
          <img src={mail} />
          </a>
        </div>
      );
    } else {
      return null;
    };
    };
  };

class Skills extends Component {
  get show() {
    return this.props.activeSection === "skills";
  };

    render() {
      if (this.show) {

        return (
          <div className='intro skills'>
          <h1>skills</h1>
          <img src={html5} alt=''/>
          <img src={css} alt=''/>
          <img src={js} alt=''/>
          <img src={rea} alt=''/>
          <img src={es6} alt=''/>
          <img src={sass} alt=''/>
          <img src={jq} alt=''/>
          <img src={gul} alt=''/>
        </div>
      );
    } else {
      return null;
    };
    };
  };

class About extends Component {
  get show() {
    return this.props.activeSection === "about";
  };

    render() {
      if (this.show) {
        
        return (
          <div className='intro about'>
         <h1>about</h1>
         <p>
            Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
         </p>
        </div>
      );
    } else {
      return null;
    };
    };
  };

class Start extends Component {
    get show() {
        return this.props.activeSection === "start";
      };

    render() {
    if (this.show) {

        return (
            <div className='intro start'>
              <h1>Name Surname</h1>
              <p>Content Content Content Content Content Content </p>
              <h2>Content Content Content Content Content Content Content Content </h2>
          </div>
      );
    } else {
        return null;
    };
    };
  };

const Main = ({ activeSection }) => (
    <React.Fragment>
      <div className="container border">
          <Start activeSection={activeSection}/>
          <About activeSection={activeSection}/>
          <Skills activeSection={activeSection}/>
          <Projects activeSection={activeSection}/>
          <Contact activeSection={activeSection}/>
        </div>
    </React.Fragment>
);

const Buttons = ({ onToggle }) => (

  <div className="buttons">
          <button name='start' onClick={onToggle}>Start</button>
          <button name='about' onClick={onToggle}>About</button>
          <button name='skills' onClick={onToggle}>Skills</button>
          <button name='contact' onClick={onToggle}>Contact</button>
        </div>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: "start",
    };


    this.handleToggleSection = this.handleToggleSection.bind(this);
  
  };

  handleToggleSection(e) {
    const {name} = e.target;
    this.setState(() => ({
      activeSection: name
    }));
  };

  render() {
    return (
      <div className="App">
        <Buttons onToggle={this.handleToggleSection}/>
        <Main activeSection={this.state.activeSection}/>
      </div>
    );
  };
};
ReactDOM.render(<App />, document.getElementById("root"));