Как сделать событие onClick в NavBar в React?

Я делаю свой первый проект реагирования. Я новичок в программировании JS, HTML, CSS и даже веб-приложений.

Я пытаюсь отобразить некоторую информацию о нажатии кнопки.

У меня есть основной компонент по умолчанию, App.js. Выглядит это так:

import React, { Component } from "react";
import Navbar from "./Components/Navbar";
import "./Styles/App.css";
import ProjectsList from "./Components/Projects/ProjectsList";
import axios from "axios";

class App extends Component {
  state = {
    projects: [], //i get it from api on Didmount();
    showProjects: true //hardcoded var to shows projects list
  };

  componentDidMount() {
      //i get projects here from axios and my api, it works ok!
  }

  render() {
    return (
      <div>
        <Navbar />
        {this.state.showProjects && (
          <ProjectsList projects = {this.state.projects} />
        )}
      </div>
    );
  }
}

export default App;

Как видите, я могу управлять своей видимостью ProjectLists с помощью жестко запрограммированного логического значения showprojects. Работает нормально. Когда ложно, это не видно, а когда истинно - видно, довольно просто.

Как передать эту переменную showProjects в мой компонент Navbar.js и запустить его, щелкнув элемент панели навигации?

Мой Navbar.js:

import React, { Component } from "react";
import { Navbar } from "react-bootstrap";

class NavBar extends Component {
  render() {
    return (
      <Navbar inverse collapseOnSelect>
        <Navbar.Collapse>
          <Navbar.Form>
            <Navbar.Brand> Projects </Navbar.Brand> //button click here, how to?
          </Navbar.Form>         
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default NavBar;

И вид выглядит так:

Я хочу иметь возможность щелкнуть Projects на моей панели навигации, тогда для моего ShowProjects будет установлено значение true, и проекты будут видны. Как это сделать?

Спасибо за любые советы!

Обновлено:

Если это поможет, мой компонент ProjectsList.js:

import React, { Component } from "react";
import Project from "./Project";
import { ListGroup } from "react-bootstrap";

class ProjectsList extends Component {
  render() {
    return (
      <ListGroup>
        {this.props.projects.map(project => {
          return <Project project = {project} key = {project.id} />;
        })}
      </ListGroup>
    );
  }
}

export default ProjectsList;