Conditional Rendering Exercise

For the purposes of this exercise, you should work only out of components/MenuBar.js and containers/MainBox.js. The Pages.js file and the components to be rendered in the main section of the page have been provided for you.

Your end goal is to make this app function like so:

alt text

A few things to think about before you start coding:

  1. What are the things that should change when a menu item is clicked?
  2. Which component should have state?
  3. Which component should have a method to change state?
  4. Which component should call the function that changes state?
  5. Which component is responsible for passing down props?
  6. How can state be used to manage the rendering of components and change the style of components already on the page?