App.js

import React, { Component } from 'react';
import './App.css';

import Header from './components/header/Header';
import Quiz from './components/quiz/Quiz';
import Signup from './components/Signup';
import Logo from './quizLogo.svg';
import Hello from './components/Hello';
import { Menu } from 'antd';
import { UserAddOutlined, DatabaseOutlined, EditOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

class App extends Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.state = {
      current: 'mail',
      title: "Quiz Master",
      serve: ""
    };
  }

  componentDidMount() {
    this.setState({ serve: <Hello /> })
  }
  
  handleClick = e => {
    if (e.key === "Signup"){
      console.log("Signup clicked");
      this.setState({ serve: <Signup /> })
    }else{

    console.log('click ', e.key);
    this.setState({ current: e.key });
    this.setState({ serve: <Quiz quizNum={e.key} /> });
    }
  };

  onSearch(term) {
    console.log("Search on term " + term);
    this.setState({ title: term });
  }

  render() {
    const { current } = this.state;
    return (
      <div>
        <Header logo={Logo} title={this.state.title} onSearchClick={this.onSearch} />

        <Menu className="menu" style={{ zIndex: '50' }} onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
          <Menu.Item key="Signup" icon={<UserAddOutlined />}>
            Signup
        </Menu.Item>
          <Menu.Item key="app" disabled icon={<EditOutlined />}>
            Make a quiz
        </Menu.Item>
          <SubMenu icon={<DatabaseOutlined />} title="Choose a quiz">
            <Menu.ItemGroup title="Quizes">
              <Menu.Item key="1">Quiz 1</Menu.Item>
              <Menu.Item key="2">Quiz 2</Menu.Item>
              <Menu.Item key="3">Quiz 3</Menu.Item>
            </Menu.ItemGroup>
          </SubMenu>
        </Menu>

        <div>
          {this.state.serve}
        </div>
      </div>
    );
  }
}

export default App;