AppBar interaction

A common place to put a button that toggles the visibility of Drawer components is the AppBar component at the top of every page in your app. Furthermore, by selecting items in a drawer, the title of the AppBar component needs to change to reflect this selection. Drawer and AppBar components often need to interact with one another.

How to do it...

Let's say that you have a Drawer component with a few items in it. You also have an AppBar component with a menu button and a title. The menu button should toggle the visibility of the drawer, and clicking on a drawer item should update the title in the AppBar. Here's the code to do it:

import React, { useState, Fragment } from 'react';

import...